Replace import source with env variable

Babel plugin to replace the source of an import statement with an env variable. This can be useful to build multiple targets/versions from one js file.

Think one to target ios and another for android. Or a version where you mock the api in case you don't have, or need to work with, a real backend (this happens all the time for me).

Wherever you find small differences that can be abstracted out into files.

Install

1npm install --save-dev babel-plugin-replace-import-source-with-env

Example

1// src/index.js
2import foo from "./hello{TARGET}.js";

1# Run babel with TARGET set
2TARGET=android babel src/index.js -o dist/android.js
3TARGET=ios babel src/index.js -o dist/ios.js

1// dist/andoid.js
2import foo from "./hello.android.js";

1// dist/ios.js
2import foo from "./hello.ios.js";

The plugin needs to be configured what to look for:

1// .babelrc
2{
3    "plugins": [
4        [
5            "replace-import-source-with-env",
6            {
7                "identifiers": ["TARGET"]
8            }
9        ]
10    ]
11}

Options

You can give it more options. Here are the options with their default values.

1// .babelrc
2{
3    "plugins": [
4        [
5            "replace-import-source-with-env",
6            {
7                "identifiers": [],
8                "prefix": ".",
9                "postfix": "",
10                "fallback": "",
11                "delimiters": ["{", "}"]
12            }
13        ]
14    ]
15}

• identifiers are a must for this plugin to do anything. They should reflect the env variables. So in the above, the plugin will expect to be able to find a process.env.TARGET that is a string. If it doesn't it will use the fallback.
• prefix of the replaced string. It's the . preceding the env variable. Will not be added in case the value to be inserted is an empty string (see below for explanation).
• postfix of the replaced string. Follows same rule as prefix.
• delimiters - By default the plugin will look for { ... }, but it can be changed to whatever you want.

prefix and postfix insertion rules

Typically you want this behavior:

1// env: MOCK=mock
2import api from "./api{MOCK}"
3// to
4import api from "./api.mock"
5//                    ^ ^
6//                    | `-- env variable
7//                    `---- prefix

But if MOCK is not set, you want

1// no MOCK env
2import api from "./api{MOCK}"
3// to
4import api from "./api"
5//                    ^-- no env variable or prefix

To do this, we only add the prefix (and postfix) if there actually is a non-emptly string to replace the {MOCK} part with.

Licence

MIT