babel-plugin-replace-imports
Replaces import statements.
Installation
npm install --save-dev babel-plugin-replace-imports
Usage
WARNING: this plugin is used only with options.
Via .babelrc
Add the following line to your .babelrc file:
{
"plugins": [
["babel-plugin-replace-imports", {
"test": /\/?regexp\//i,
"replacer": "string"
}]
]
}
Using in conjunction with the babel-loader
You can pass options to the babel loader by using the options property (see the babel options):
module: {
rules: [
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
plugins: ["babel-plugin-replace-imports", {
"test": /\/?regexp\//i,
"replacer": "string"
}]
}
}
}
]
}
Options
| Name | Type | Description |
|---|
| test | RegExp | Regular expression is tested with the import instance. |
| replacer | String|Function | A string that replaces the substring specified by the specified test parameter. A number of special replacement patterns are supported (see String.prototype.replace()).
A function to be invoked to create the new substring to be used to replace the matches to the given regexp of the test parameter. The arguments supplied to this function are described in the String.prototype.replace(). |
Examples
Example 1.
Options:
{
"plugins": [
["babel-plugin-replace-imports", {
"test": /\.styl$/i,
"replacer": "$&?theme-red"
}]
]
}
In:
import 'reset.styl';
import 'reset';
import './views';
import '../styles.styl';
import styl from '../stylus/common.styl';
Out:
import 'reset.styl?theme-red';
import 'reset';
import './views';
import '../styles.styl?theme-red';
import styl from '../stylus/common.styl?theme-red';
Example 2.
Options:
{
"plugins": [
["babel-plugin-replace-imports", {
"test": /\.styl$/i,
"replacer": [
"$&?theme-red",
"$&?theme-green",
"$&?theme-blue"
]
}]
]
}
In:
import 'reset.styl';
import 'reset';
import './views';
import '../styles.styl';
import styl from '../stylus/common.styl';
Out:
import 'reset.styl?theme-red';
import 'reset.styl?theme-green';
import 'reset.styl?theme-blue';
import 'reset';
import './views';
import '../styles.styl?theme-red';
import '../styles.styl?theme-green';
import '../styles.styl?theme-blue';
import styl from '../stylus/common.styl?theme-red';
import styl from '../stylus/common.styl?theme-green';
import styl from '../stylus/common.styl?theme-blue';
Example 3.
WARNING: only one replacement rule is processed. It depends on order of the option list.
Options:
{
"plugins": [
["babel-plugin-replace-imports", [
{
"test": /\/stylus\//,
"replacer": "/sass/"
}, {
"test": /\.styl$/i,
"replacer": "$&?theme-red"
}
]]
]
}
In:
import 'reset.styl';
import 'reset';
import './views';
import '../styles.styl';
import styl from '../stylus/common.styl';
Out:
For each import statement was done only one replacement rule.
import 'reset.styl?theme-red';
import 'reset';
import './views';
import '../styles.styl?theme-red';
import styl from '../sass/common.styl';
