babel-plugin-replace-imports

Replaces import statements.

Installation

1npm 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:

1{
2  "plugins": [
3    ["babel-plugin-replace-imports", {
4      "test": /\/?regexp\//i,
5      "replacer": "string"
6    }]
7  ]
8}

Using in conjunction with the babel-loader

You can pass options to the babel loader by using the options property (see the babel options):

1module: {
2  rules: [
3    {
4      test: /\.js$/,
5      use: {
6        loader: "babel-loader",
7        options: {
8          plugins: ["babel-plugin-replace-imports", {
9            "test": /\/?regexp\//i,
10            "replacer": "string"
11          }]
12        }
13      }
14    }
15  ]
16}

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:

1{
2  "plugins": [
3    ["babel-plugin-replace-imports", {
4      "test": /\.styl$/i,
5      "replacer": "$&?theme-red"
6    }]
7  ]
8}

In:

1import 'reset.styl';
2import 'reset';
3import './views';
4import '../styles.styl';
5import styl from '../stylus/common.styl';

Out:

1import 'reset.styl?theme-red';
2import 'reset';
3import './views';
4import '../styles.styl?theme-red';
5import styl from '../stylus/common.styl?theme-red';

Example 2.

Options:

1{
2  "plugins": [
3    ["babel-plugin-replace-imports", {
4      "test": /\.styl$/i,
5      "replacer": [
6        "$&?theme-red",
7        "$&?theme-green",
8        "$&?theme-blue"
9      ]
10    }]
11  ]
12}

In:

1import 'reset.styl';
2import 'reset';
3import './views';
4import '../styles.styl';
5import styl from '../stylus/common.styl';

Out:

1import 'reset.styl?theme-red';
2import 'reset.styl?theme-green';
3import 'reset.styl?theme-blue';
4import 'reset';
5import './views';
6import '../styles.styl?theme-red';
7import '../styles.styl?theme-green';
8import '../styles.styl?theme-blue';
9import styl from '../stylus/common.styl?theme-red';
10import styl from '../stylus/common.styl?theme-green';
11import 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:

1{
2  "plugins": [
3    ["babel-plugin-replace-imports", [
4      {
5        "test": /\/stylus\//,
6        "replacer": "/sass/"
7      }, {
8        "test": /\.styl$/i,
9        "replacer": "$&?theme-red"
10      }
11    ]]
12  ]
13}

In:

1import 'reset.styl';
2import 'reset';
3import './views';
4import '../styles.styl';
5import styl from '../stylus/common.styl';

Out: For each import statement was done only one replacement rule.

1import 'reset.styl?theme-red';
2import 'reset';
3import './views';
4import '../styles.styl?theme-red';
5import styl from '../sass/common.styl';