rollup-plugin-inject-process-env

> Inject process.env environment variables in a browser rollup bundle.

Why ?

Because replacing a string typically with rollup-plugin-replace works in one case :

``js
console.log(process.env.NODE_ENV);
`

...but not in all other cases :

`js
console.log(process.env['NODE_ENV']);
`

`js
const { NODE_ENV, NODE_PORT } = process.env;
console.log(NODE_ENV);
`

Worse : sometimes, such substitution :

`js
if (process.env.NODE_ENV === 'production') {
`

...will be expand to :

`js
if ('production' === 'production') {
`

...and make some linter complain.

How ?

$3

`bash
npm install --save-dev rollup-plugin-inject-process-env
`

$3

Pass any JSON object to the plugin that will be set as the process.env value. This object accept members value of any type.

`typescript
function injectProcessEnv(
env: object,
options?: {
include?: string | string[],
exclude?: string | string[],
verbose?: boolean
}
)
`

> Note: if you use the commonjs plugin injectProcessEnv must be listed _after_ it in your plugins list. Otherwise you will see the error 'import' and 'export' may only appear at the top level.

#### Example :

`js
import injectProcessEnv from 'rollup-plugin-inject-process-env';

// ... usual rollup stuff

plugins: [
typescript(),
commonjs(),
injectProcessEnv({
NODE_ENV: 'production',
SOME_OBJECT: { one: 1, two: [1,2], three: '3' },
UNUSED: null
}),
nodeResolve()
],
`

#### Example with environment variables passed in the CLI :

`js
injectProcessEnv({
NODE_ENV: process.env.NODE_ENV,
SOME_OBJECT: JSON.parse(process.env.SOME_OBJECT),
UNUSED: null
}),
`

#### Options

* The verbose option allows to show which file is included in the process and which one is excluded.
* The include and exclude options allow to explicitely specify with a minimatch pattern the files to accept or reject. By default, all files are targeted and no files are rejected.

Example :

`js
injectProcessEnv({
NODE_ENV: 'production',
SOME_OBJECT: { one: 1, two: [1,2], three: '3' },
UNUSED: null
}, {
exclude: '*/.css',
verbose: true
}),
postcss({
inject: true,
minimize: true,
plugins: [],
}),
`

Output example of the verbose option :

`
[rollup-plugin-inject-process-env] Include /path/to/src/index.ts
[rollup-plugin-inject-process-env] Exclude rollup-plugin-inject-process-env
[rollup-plugin-inject-process-env] Exclude /path/to/src/style.3.css
[rollup-plugin-inject-process-env] Include /path/to/node_modules/style-inject/dist/style-inject.es.js
`

#### Icing on the cake

You might notice that as mentionned in the documentation https://nodejs.org/api/process.html#process_process_env
environment variables are always string, number or boolean.

With rollup-plugin-inject-process-env, you may inject safely any JSON object to a process.env property, as shown in the example above.

Troubleshootings

$3

This error may occur in target environments where globalThis is undefined. You should use a polyfill to fix it :

`
npm install @ungap/global-this
`

And include it in your code, e.g. :

`
import '@ungap/global-this';
`

* https://github.com/ungap/global-this
* https://mathiasbynens.be/notes/globalthis

Reports

> Code quality reports

$3

| Files | 1 | |
| ----- | -: | - |
| Lines of code | 59 | (w/o comments) |
| Comments | 4 | (+ 1 with code) |
| Empty lines | 4 | |
| Total lines | 67 | (w/o tests) |
| TODO | 0 | lines |
| Tests | 455 | (w/o comments) |

$3

✅ 0 problems

$3

| | Tests suites | Tests |
| - | ------------ | ----- |
| ❌ Failed | 0 | 0 |
| ✅ Passed | 4 | 12 |
| ✴ Pending | 0 | 0 |
| ☢ Error | 0 | |
| Total | 4 | 12 |


#### ✅ /test/browser.test.ts 1.727s


| Status | Suite | Test |
| ------ | ----- | ---- |
| ✅ | Browser | get NODE_ENV |
| ✅ | Browser | get SOME_OBJECT |
| ✅ | Browser | get MISSING |

#### ✅ /test/node.3.test.ts 0.173s


| Status | Suite | Test |
| ------ | ----- | ---- |
| ✅ | Filter out CSS | get NODE_ENV |
| ✅ | Filter out CSS | get SOME_OBJECT |
| ✅ | Filter out CSS | get MISSING |

#### ✅ /test/node.test.ts 0.162s


| Status | Suite | Test |
| ------ | ----- | ---- |
| ✅ | Node | get NODE_ENV |
| ✅ | Node | get SOME_OBJECT |
| ✅ | Node | get MISSING |

#### ✅ /test/node.2.test.ts` 0.161s

| Status | Suite | Test |
| ------ | ----- | ---- |
| ✅ | Node | get NODE_ENV |
| ✅ | Node | get SOME_OBJECT |
| ✅ | Node | get MISSING |

License

MIT

Who ?

* Inria
* Inria @ Github