This Babel 6 plugin allows you to use webpack aliases and most of webpack
resolvefeatures in Babel.
This plugin is simply going to take the aliases defined in your webpack config and replace require paths. It is especially useful when you rely on webpack aliases to keep require paths nicer (and sometimes more consistent depending on your project configuration) but you can't use webpack in a context, for example for unit testing.
If you are having issues while making this plugin work, have a look at the examples folder. Play with them, mix your own config in, and feel free to open an issue!
With the following webpack.config.js:
module.exports = {
...
resolve: {
alias: {
'my-alias': path.join(__dirname, '/alias-folder/js/'),
'library-name': './library-folder/folder'
}
}
...
};A javascript file before compilation:
var MyModule = require('my-alias/src/lib/MyModule');
import MyImport from 'library-name/lib/import/MyImport';will become:
var MyModule = require('../../alias-folder/js/lib/MyModule');
import MyImport from '../../library-folder/folder/lib/import/MyImport';This is an example but the plugin will output the relative path depending on the position of the file and the alias folder.
See the examples folder for more configuration examples.
$ npm install --save-dev babel-plugin-webpack-aliasAdd it as a plugin to your .babelrc file. You can optionally add a path to a config file, for example:
{
"presets":[ "react", "es2015", "stage-0" ],
"env": {
"test": {
"plugins": [
[ "babel-plugin-webpack-alias", { "config": "./webpack.config.test.js" } ]
]
}
}
}In this case, the plugin will only be run when NODE_ENV is set to test.
resolve.alias: That is the reason why this plugin has been made, see above for examples and details.resolve.extensions: It will try to match extensions provided in the webpack configuration.
-
config(string): Path to your webpack config file.The plugin is going to look for a
webpack.config.jsfile or awebpack.config.babel.jsat the root, in case your webpack configuration file is in another location, you can use this option to provide an absolute or relative path to it. You can also use environment variable in this option, using lodash template, for example:{ "presets":[ "react", "es2015", "stage-0" ], "env": { "test": { "plugins": [ [ "babel-plugin-webpack-alias", { "config": "${PWD}/webpack.config.test.js" } ] ] } } }And run with:
$ PWD=$(pwd) NODE_ENV=test ava -
findConfig(boolean): Will find the nearest webpack configuration file when set totrue.It is possible to pass a findConfig option, and the plugin will attempt to find the nearest webpack configuration file within the project using find-up. For example:
{ "presets":[ "react", "es2015", "stage-0" ], "env": { "test": { "plugins": [ [ "babel-plugin-webpack-alias", { "config": "webpack.config.test.js", "findConfig": true } ] ] } } } -
noOutputExtension(boolean): Don't append extension at the end of filenames even when aresolve.extensionswebpack config is set.The normal behaviour of the
resolve.extensionssupport is this one:var MyModule = require('my-alias/src/lib/MyComponent.jsx'); // is converted to: var MyModule = require('../../alias-folder/js/lib/MyComponent.jsx');
However in particular cases you'll compile
MyComponent.jsxto aMyComponent.jsfile so the build alias won't be able to resolve thejsxfile. In that case you can turnnoOutputExtensionon and get:var MyModule = require('my-alias/src/lib/MyComponent.jsx'); // is converted to: var MyModule = require('../../alias-folder/js/lib/MyComponent');
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent