A babel plugin that combines babel-plugin-module-resolver and tsconfig-paths to resolve tsconfig paths
npm install babel-plugin-tsconfig-paths-module-resolver   
> Combines [babel-plugin-module-resolver][0] and [tsconfig-paths][1] to make a babel plugin that resolves [tsconfig paths][2].
>
> Use tsconfig-paths in any bundler that supports a custom babel config.
This library is a re-export of babel-plugin-module-resolver pre-configured with [tsconfig paths][2] support via the package [tsconfig-paths][1].
It aims to be stable by relying on these already widely-used packages to power the heavy logic:
| dependency | weekly downloads |
| ----------------------------------- | -------------------------------------------------------- |
| [babel-plugin-module-resolver][0] | [![babel plugin module resolver weekly downloads][3]][4] |
| [tsconfig-paths][1] | [![tsconfig-paths weekly downloads][5]][6] |
These dependencies are automatically updated via renovate bot and semantic release.
---
How is this different from babel-plugin-tsconfig-paths?
1. It does less — as stated above, this library depends on battled tested libs ([tsconfig-paths][1] and [babel-plugin-module-resolver][0]) to do the actual logic. The source code for this library is around ~100 SLOC which makes it easy to test and maintain.
2. It re-exports [babel-plugin-module-resolver][0] — giving you all the features of that babel plugin including custom resolve functions.
---
```
npm install --save-dev babel-plugin-tsconfig-paths-module-resolver
or
``
yarn add --dev babel-plugin-tsconfig-paths-module-resolver
Specify the plugin in your .babelrc (or equivalent configuration file).
`jsplugins
{
"presets": [
// ...
"@babel/preset-typescript",
// ...
],
"plugins": [
// add this to your babel config file in `
// 👇👇👇
"tsconfig-paths-module-resolver"
// 👆👆👆
// ...
]
}
That's it! [Paths from your tsconfig.json][2] should now work!
babel-plugin-tsconfig-paths-module-resolver accepts the same options as babel-plugin-module-resolver.
You can supply those extra options in your babel configuration file like so:
`js`
{
"presets": [
// ...
"@babel/preset-typescript",
// ...
],
"plugins": [
// ...
[
"tsconfig-paths-module-resolver",
// add extra options here
// 👇👇👇
{
// see here:
// https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md
}
// 👆👆👆
]
]
};
[babel-plugin-module-resolver][0] includes a configuration option to allow you to programmatically resolve your imports.
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.
`js
const createResolvePath = require('babel-plugin-tsconfig-paths-module-resolver/create-resolve-path');
const defaultResolvePath = createResolvePath();
/**
* @param sourceFile {string} the input source path
* @param currentFile {string} the absolute path of the current file
* @param opts {any} the options as passed to the Babel config
* @return {string}
*/
function customResolvePath(sourceFile, currentFile, opts) {
// ...
const result = defaultResolvePath(sourceFile, currentFile, opts);
// ...
return result;
}
// .babelrc.js
module.exports = {
presets: [
// ...
'@babel/preset-typescript',
// ...
],
plugins: [
// ...
[
'tsconfig-paths-module-resolver',
{
// 👇👇👇
resolvePath: customResolvePath,
// 👆👆👆
},
],
],
};
``
[0]: https://github.com/tleunen/babel-plugin-module-resolver
[1]: https://github.com/dividab/tsconfig-paths
[2]: https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
[3]: https://badgen.net/npm/dw/babel-plugin-module-resolver
[4]: https://www.npmjs.com/package/babel-plugin-module-resolver
[5]: https://badgen.net/npm/dw/tsconfig-paths
[6]: https://www.npmjs.com/package/tsconfig-paths