Runtime-environment-webpack-plugin NPM

runtime-environment-webpack-plugin

The webpack RuntimeDefinePlugin allows you to create global constants which can be configured at runtime, even after the asset(s) have been emitted to output directory by webpack.

Install

$ npm i runtime-environment-webpack-plugin

Usage

This plugin must be used with the babel plugin babel-plugin-transform-environment-variables-to-getters

Be careful, only use this plugin for BROWSER-SIDE webpack compilation.

.babelrc

{
  "plugins": ["transform-environment-variables-to-getters", {
    "envFilepath": "/path/to/envs.js",
    "include": ["NODE_DEBUG"]
  }]
}

const RuntimeEnvironmentPlugin = require('runtime-environment-webpack-plugin')

const envFilepath = '/path/to/envs.js'
const plugin = new RuntimeEnvironmentPlugin({
  envs: [
    'NODE_DEBUG',
    'NODE_ENV'
  ],
  envFilepath
})

webpackConfig.plugins.push(plugin)

// Run webpack
webpack(webpackConfig).run(() => {

  // And after that we can change the global constants by
  plugin.set('NODE_DEBUG', '')

  // Reload all variables to the latest of the process.env
  plugin.reload()

  // Reload a single environment key
  plugin.reload('NODE_DEBUG')

  // Save changes to files
  plugin.save().then(() => {
    // The content of the chunks has been changed
  })
})

How does it work?

RuntimeEnvironmentPlugin will generate and output a commonjs module to the path options.envFilepath.

And the module exports a function which returns the env object.

// After webpack has been run

console.log(require(envFilepath).NODE_DEBUG)
// will print `process.env.NODE_DEBUG` at the compiling time of webpack.

RuntimeEnvironmentPlugin tracks all chunks that depend on the module envFilepath and will change the content of each chunk if we reload or set the environment variables.

new RuntimeEnvironmentPlugin(options)

options Object
- envs Object the same as the first parameter of new webpack.DefinePlugin
- envFilepath path the file that environment variables will be save into.