badcafe/rollup-plugin-inject-process-env

README

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 :

    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 ?

README

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 :

    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