Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Transforms module resolution paths using TypeScript path mapping and/or custom paths

License

NotificationsYou must be signed in to change notification settings

LeDDGroup/typescript-transform-paths

Repository files navigation

npm versionBuild StatusConventional Commitscode style: prettier

Transform compiled source module resolution paths using TypeScript'spaths config, and/or custom resolution paths.

Setup Steps

1. Install

<yarn|npm|pnpm> add -D typescript-transform-paths

2. Configure

Add it toplugins in yourtsconfig.json

Example Config

{"compilerOptions": {"baseUrl":"./",// Configure your path mapping here"paths": {"@utils/*": ["utils/*"],    },// Note: To transform paths for both the output .js and .d.ts files, you need both of the below entries"plugins": [// Transform paths in output .js files      {"transform":"typescript-transform-paths" },// Transform paths in output .d.ts files (Include this line if you output declarations files)      {"transform":"typescript-transform-paths","afterDeclarations":true },    ],  },}

Example result

core/index.ts

// The following transforms path to '../utils/sum'import{sum}from"@utils/sum";

3. Usage

  • Compile withtsc — Usets-patch

  • Use with ts-node — Addtypescript-transform-paths/register torequire config.

    tsconfig.json

    {"ts-node": {"transpileOnly":true,"require": ["typescript-transform-paths/register" ],  },"compilerOptions"{/* ...*/ }}
  • Use with node — Use the register script:node -r typescript-transform-paths/register src/index.ts

  • Use with NX — Add thetypescript-transform-paths/nx-transformer to project config

    project.json

    {/* ...*/"targets": {"build": {/* ...*/"options": {/* ...*/"transformers": [          {"name":"typescript-transform-paths/nx-transformer","options": {"afterDeclarations":true },          },        ],      },    },  },}

Virtual Directories

TS allows definingvirtual directoriesvia therootDirs compiler option.To enable virtual directory mapping, use theuseRootDirs plugin option.

{"compilerOptions": {"rootDirs": ["src","generated"],"baseUrl":".","paths": {"#root/*": ["./src/*","./generated/*"],    },"plugins": [      {"transform":"typescript-transform-paths","useRootDirs":true },      {"transform":"typescript-transform-paths","useRootDirs":true,"afterDeclarations":true },    ],  },}

Example

- src/    - subdir/      - sub-file.ts    - file1.ts- generated/    - file2.ts

src/file1.ts

import"#root/file2.ts";// resolves to './file2'

src/subdir/sub-file.ts

import"#root/file2.ts";// resolves to '../file2'import"#root/file1.ts";// resolves to '../file1'

Custom Control

Exclusion patterns

You can disable transformation for paths based on the resolved file path. Theexclude option allows specifying globpatterns to match against resolved file path.

For an example context in which this would be useful, seeIssue #83

Example:

{"compilerOptions": {"paths": {"sub-module1/*": ["../../node_modules/sub-module1/*"],"sub-module2/*": ["../../node_modules/sub-module2/*"],    },"plugins": [      {"transform":"typescript-transform-paths","exclude": ["**/node_modules/**"],      },    ],  },}
// This path will not be transformedimport*assm1from"sub-module1/index";

@transform-path tag

Use the@transform-path tag to explicitly specify the output path for a single statement.

//@transform-path https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.jsimportreactfrom"react";// Output path will be the url above

@no-transform-path

Use the@no-transform-path tag to explicitly disable transformation for a single statement.

//@no-transform-pathimport"normally-transformed";// This will remain 'normally-transformed', even though it has a different value in paths config

Project Guidelines for Contributors

  • Package Manager:yarn (yarn install)
  • Format and lint the code before commit:prettier (yarn format && yarn lint)
  • Commit messages:Conventional Commit Specs
  • Releases:changelogen (yarn release)
GH_TOKEN=$(gh auth token) yarn release

Alternatives

Maintainers


Ron S.

Daniel Perez Alvarez

About

Transforms module resolution paths using TypeScript path mapping and/or custom paths

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

  •  
  •  

Packages

No packages published

Contributors18


[8]ページ先頭

©2009-2025 Movatter.jp