LeDDGroup/typescript-transform-pathsPublic

NotificationsYou must be signed in to change notification settings
Fork29
Star497

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

License

MIT license

497 stars 29 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 463 Commits
.github		.github
.idea		.idea
docs		docs
examples/basic		examples/basic
src		src
test		test
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierignore		.prettierignore
.yarnrc.yml		.yarnrc.yml
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
package.json		package.json
renovate.json		renovate.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

typescript-transform-paths

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

Tip

Upgrading from v3 to v4? See themigration documentation.

Important

We arelooking for maintainers.
Explorealternatives.

Setup Steps

1. Install

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

2. Configure

Add it toplugins in yourtsconfig.json file.

Example Configuration

{"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 import path is transformed to '../utils/sum'import{sum}from"@utils/sum";

3. Use

Compile withtsc — Usets-patch.
Run withts-node — See theWiki.

Integrate withNx — Add thetypescript-transform-paths/plugins/nx transformer to the project configuration.

project.json

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

Virtual Directories

TypeScript allows definingVirtual Directories via therootDirs compiler option.
To enable Virtual Directory mapping, use theuseRootDirs plugin option.

tsconfig.json

{"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 Glob patterns to match against those resolved file paths.

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

tsconfig.json

{"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

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 defined 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