A Babel plugin to import similar to webpack alias.
Implemented based on plugin enhanced-resolve.
Simplify the require import System.import System.import path.
// simple @utils -> <root dir>/utils
import t from '@utils';
// instead
import t from '../../utils/index';
const t = require('@utils');
// instead
const t = require('../../utils/index');Install the plugin
npm install --save-dev babel-plugin-module-resolve`
or
yarn add --dev babel-plugin-module-resolve`
Specify the plugin in your .babelrc with the custom root or alias. Here's an example:
{
"plugins": [
[
"module-resolve",
{
"roots": ["./src"],
"alias": {
"@/*": ["./*"],
"assets": ["./assets"]
}
}
]
]
}Also supports the use of paths configuration in jsconfig and tsconfig.
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": ["./*"]
}
}
}Detailed reference enhanced-resolve.
Parsed root directory
- Type:
array - Default:
cwd | compilerOptions.baseUrl
Alias configuration
- Type:
object - Default:
{ @: resolve('src') } | compilerOptions.paths
Parse file types
- Type:
array - Default:
['.js', '.jsx', '.es', '.es6', '.mjs', '.ts', '.tsx']