@tmaxmax/rollup-plugin-inject-process-env

Inject environment variables in process.env with Rollup

Usage no npm install needed!

<script type="module">
  import tmaxmaxRollupPluginInjectProcessEnv from 'https://cdn.skypack.dev/@tmaxmax/rollup-plugin-inject-process-env';
</script>

README

rollup-plugin-inject-process-env

NOTE: This is a fork of the original plugin. It includes a globalThis polyfill and removes a const declaration which would break bundles in older browsers. You most probably don't need this, use the original.

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

Why ?

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

    console.log(process.env.NODE_ENV);

...but not in all other cases :

    console.log(process.env['NODE_ENV']);
    const { NODE_ENV, NODE_PORT } = process.env;
    console.log(NODE_ENV);

Worse : sometimes, such substitution :

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

...will be expand to :

    if ('production' === 'production') {

...and make some linter complain.

How ?

Installation

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

Usage

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

    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 :

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 :

        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 :

        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

'globalThis' is undefined

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';

Reports

Code quality reports

Metrics

| 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) |

Linter

✅ 0 problems

Tests

| | 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 ?