process-envify

A process env helper for injecting strings.

Install

1$ npm i process-envify -D
2# or
3$ pnpm i process-envify -D
4# or
5$ yarn add process-envify -D

Usage

1// Input:
2const getBookName = () => process.env.BOOK_NAME;

1// In your build tool (see below):
2import envify from 'process-envify';
3
4envify({ BOOK_NAME: 'ECMAScript: Up and Running' });

1// Output:
2const getBookName = () => 'ECMAScript: Up and Running';

Vite (vite.config.ts)

1import { defineConfig } from 'vite';
2import envify from 'process-envify';
3
4export default defineConfig({
5  define: envify({ BOOK_NAME: 'ECMAScript: Up and Running' }),
6});

Vue CLI (vue.config.js)

1const envify = require('process-envify');
2
3module.exports = {
4  chainWebpack: (config) => {
5    config.plugin('define').tap((args) => {
6      Object.assign(
7        args[0],
8        envify({ BOOK_NAME: 'ECMAScript: Up and Running' }),
9      );
10
11      return args;
12    });
13  },
14};

CRACO (Create React App Configuration Override, craco.config.js)

1const webpack = require('webpack');
2
3module.exports = {
4  webpack: {
5    configure: {
6      plugins: [
7        new webpack.DefinePlugin(
8          envify({ BOOK_NAME: 'ECMAScript: Up and Running' }),
9        ),
10      ],
11    },
12  },
13};

Angular CLI (angular.json) + Angular Builders (extra-webpack.config.js)

1{
2  "architect": {
3    "serve": {
4      "builder": "@angular-builders/custom-webpack:dev-server",
5      "options": {
6        "customWebpackConfig": {
7          "path": "./extra-webpack.config.js"
8        }
9      }
10    },
11    "build": {
12      "builder": "@angular-builders/custom-webpack:browser",
13      "options": {
14        "customWebpackConfig": {
15          "path": "./extra-webpack.config.js"
16        }
17      }
18    }
19  }
20}

1const webpack = require('webpack');
2const envify = require('process-envify');
3
4module.exports = {
5  plugins: [
6    new webpack.DefinePlugin(
7      envify({ BOOK_NAME: 'ECMAScript: Up and Running' }),
8    ),
9  ],
10};

Rollup (rollup.config.js)

1import replace from '@rollup/plugin-replace';
2import envify from 'process-envify';
3
4export default {
5  plugins: [
6    replace(
7      envify({ BOOK_NAME: 'ECMAScript: Up and Running' }),
8    ),
9  ],
10};

Webpack (webpack.config.js)

1const webpack = require('webpack');
2const envify = require('process-envify');
3
4module.exports = {
5  plugins: [
6    new webpack.DefinePlugin(
7      envify({ BOOK_NAME: 'ECMAScript: Up and Running' }),
8    ),
9  ],
10};

Gulp (gulpfile.js)

1const gulp = require('gulp');
2const replaces = require('gulp-replaces');
3const envify = require('process-envify');
4
5function defaultTask() {
6  return gulp
7    .src('./src/main.js')
8    .pipe(replaces(
9      envify({ BOOK_NAME: 'ECMAScript: Up and Running' }),
10    ))
11    .pipe(gulp.dest('./dist'));
12}
13
14exports.default = defaultTask;