|
| 1 | +# babel-plugin-tsconfig-paths-module-resolver |
| 2 | + |
| 3 | +[](https://www.npmjs.com/package/babel-plugin-tsconfig-paths-module-resolver) [](https://github.com/ricokahler/babel-plugin-tsconfig-paths-module-resolver/actions) [](https://codecov.io/gh/ricokahler/babel-plugin-tsconfig-paths-module-resolver) [](https://github.com/semantic-release/semantic-release) |
| 4 | + |
| 5 | +> Combines [`babel-plugin-module-resolver`][0] and [`tsconfig-paths`][1] to make a babel plugin that resolves [tsconfig paths][2]. |
| 6 | +
|
| 7 | +This library is a re-export of [`babel-plugin-module-resolver`](https://github.com/tleunen/babel-plugin-module-resolver) pre-configured with [tsconfig paths][2] support via the package [`tsconfig-paths`][1]. |
| 8 | + |
| 9 | +It aims to be stable by relying on these already widely-used packages to power the heavy logic: |
| 10 | + |
| 11 | +| dependency | weekly downloads | |
| 12 | +| ----------------------------------- | -------------------------------------------------------- | |
| 13 | +| [`babel-plugin-module-resolver`][0] | [![babel plugin module resolver weekly downloads][3]][4] | |
| 14 | +| [`tsconfig-paths`][1] | [![tsconfig-paths weekly downloads][5]][6] | |
| 15 | + |
| 16 | +These dependencies are automatically updated via [renovate bot](https://github.com/renovatebot/renovate) and [semantic release](https://github.com/semantic-release/semantic-release). |
| 17 | + |
| 18 | +## Installation |
| 19 | + |
| 20 | +``` |
| 21 | +npm install --save-dev babel-plugin-tsconfig-paths-module-resolver |
| 22 | +``` |
| 23 | + |
| 24 | +or |
| 25 | + |
| 26 | +``` |
| 27 | +yarn add --dev babel-plugin-tsconfig-paths-module-resolver |
| 28 | +``` |
| 29 | + |
| 30 | +Specify the plugin in your `.babelrc` (or [equivalent configuration file](https://babeljs.io/docs/en/config-files#configuration-file-types)). |
| 31 | + |
| 32 | +```js |
| 33 | +{ |
| 34 | + "presets": [ |
| 35 | + // ... |
| 36 | + "@babel/preset-typescript", |
| 37 | + // ... |
| 38 | + ], |
| 39 | + "plugins": [ |
| 40 | + // add this to your babel config file in `plugins` |
| 41 | + // 👇👇👇 |
| 42 | + "tsconfig-paths-module-resolver" |
| 43 | + // 👆👆👆 |
| 44 | + // ... |
| 45 | + ] |
| 46 | +} |
| 47 | +``` |
| 48 | + |
| 49 | +## Advanced usage |
| 50 | + |
| 51 | +`babel-plugin-tsconfig-paths-module-resolver` accepts the same options as [`babel-plugin-module-resolver`](https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md). |
| 52 | + |
| 53 | +You can supply those extra options in your babel configuration file like so: |
| 54 | + |
| 55 | +```js |
| 56 | +{ |
| 57 | + "presets": [ |
| 58 | + // ... |
| 59 | + "@babel/preset-typescript", |
| 60 | + // ... |
| 61 | + ], |
| 62 | + "plugins": [ |
| 63 | + // ... |
| 64 | + [ |
| 65 | + "tsconfig-paths-module-resolver", |
| 66 | + // add extra options here |
| 67 | + // 👇👇👇 |
| 68 | + { |
| 69 | + // see here: |
| 70 | + // https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md |
| 71 | + } |
| 72 | + // 👆👆👆 |
| 73 | + ] |
| 74 | + ] |
| 75 | +}; |
| 76 | +``` |
| 77 | + |
| 78 | +### `resolvePath` and `createResolvePath` |
| 79 | + |
| 80 | +[`babel-plugin-module-resolver`][0] includes [a configuration option](https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md#resolvepath) to allow you to programmatically resolve your imports. |
| 81 | + |
| 82 | +This plugin provides a `resolvePath` implementation powered by [`tsconfig-paths`][1]. If you'd like to implement your own `resolvePath` implementation while still utilizing this plugin's default implementation, you can separately import `createResolvePath` that returns a `resolvePath` implementation. |
| 83 | + |
| 84 | +```js |
| 85 | +const createResolvePath = require('babel-plugin-tsconfig-paths-module-resolver/create-resolve-path'); |
| 86 | +const defaultResolvePath = createResolvePath(); |
| 87 | + |
| 88 | +/** |
| 89 | + * @param sourceFile {string} the input source path |
| 90 | + * @param currentFile {string} the absolute path of the current file |
| 91 | + * @param opts {any} the options as passed to the Babel config |
| 92 | + * @return {string} |
| 93 | + */ |
| 94 | +function customResolvePath(sourceFile, currentFile, opts) { |
| 95 | + // ... |
| 96 | + const result = defaultResolvePath(sourceFile, currentFile, opts); |
| 97 | + // ... |
| 98 | + |
| 99 | + return result; |
| 100 | +} |
| 101 | + |
| 102 | +// .babelrc.js |
| 103 | +module.exports = { |
| 104 | + presets: [ |
| 105 | + // ... |
| 106 | + '@babel/preset-typescript', |
| 107 | + // ... |
| 108 | + ], |
| 109 | + plugins: [ |
| 110 | + // ... |
| 111 | + [ |
| 112 | + 'tsconfig-paths-module-resolver', |
| 113 | + { |
| 114 | + // 👇👇👇 |
| 115 | + resolvePath: customResolvePath, |
| 116 | + // 👆👆👆 |
| 117 | + }, |
| 118 | + ], |
| 119 | + ], |
| 120 | +}; |
| 121 | +``` |
| 122 | + |
| 123 | +[0]: https://github.com/tleunen/babel-plugin-module-resolver |
| 124 | +[1]: https://github.com/dividab/tsconfig-paths |
| 125 | +[2]: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping |
| 126 | +[3]: https://badgen.net/npm/dw/babel-plugin-module-resolver |
| 127 | +[4]: https://www.npmjs.com/package/babel-plugin-module-resolver |
| 128 | +[5]: https://badgen.net/npm/dw/tsconfig-paths |
| 129 | +[6]: https://www.npmjs.com/package/tsconfig-paths |
0 commit comments