Combines
babel-plugin-module-resolver
andtsconfig-paths
to make a babel plugin that resolves tsconfig paths.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 support via the package tsconfig-paths
.
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 |
|
tsconfig-paths |
These dependencies are automatically updated via renovate bot and semantic release.
How is this different from babel-plugin-tsconfig-paths
?
- It does less — as stated above, this library depends on battled tested libs (
tsconfig-paths
andbabel-plugin-module-resolver
) to do the actual logic. The source code for this library is around ~100 SLOC which makes it easy to test and maintain. - It re-exports
babel-plugin-module-resolver
— 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).
{
"presets": [
// ...
"@babel/preset-typescript",
// ...
],
"plugins": [
// add this to your babel config file in `plugins`
// 👇👇👇
"tsconfig-paths-module-resolver"
// 👆👆👆
// ...
]
}
That's it! Paths from your tsconfig.json 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:
{
"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
includes a configuration option to allow you to programmatically resolve your imports.
This plugin provides a resolvePath
implementation powered by tsconfig-paths
. 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.
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,
// 👆👆👆
},
],
],
};