This Babel 6 plugin allows you to use webpack aliases and most of webpack
resolve
features 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-alias
Add 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.js
file or awebpack.config.babel.js
at 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.extensions
webpack config is set.The normal behaviour of the
resolve.extensions
support 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.jsx
to aMyComponent.js
file so the build alias won't be able to resolve thejsx
file. In that case you can turnnoOutputExtension
on and get:var MyModule = require('my-alias/src/lib/MyComponent.jsx'); // is converted to: var MyModule = require('../../alias-folder/js/lib/MyComponent');
babel-plugin-webpack-alias's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.