Skip to content

A webpack plugin for injecting parameters into bundles, for example feature flags

License

Notifications You must be signed in to change notification settings

Obi-Dann/runtime-parameter-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Runtime Parameter Plugin

Plugin that allows passing parameters to JS bundles at runtime

Install

  npm i --save-dev runtime-parameter-plugin
  yarn add --dev runtime-parameter-plugin

Usage

webpack.config.js

const RuntimeParameterPlugin = require('runtime-parameter-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new RuntimeParameterPlugin([
        'RuntimeVariable_1',
        { name: 'RuntimeVariable_2', isKeySet: false }
        { name: 'RuntimeVariableSet', isKeySet: true }
    ])
  ]
}

index.js

if (RuntimeVariable_1 === 'a') {
    console.log('RuntimeVariable_1 is a');
}

if (RuntimeVariable_2 === 'b') {
    console.log('RuntimeVariable_2 is b');
}

if (RuntimeVariableSet.Value1 === 'c') {
    console.log('RuntimeVariableSet.Value1 is c');
}

if (RuntimeVariableSet.Value2 === 'd') {
    console.log('RuntimeVariableSet.Value2 is d');
}

index_bundle.js

// ... webpack runtime ...


/***/ "./index.js":
/*!******************!*\
  !*** ./index.js ***!
  \******************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

/* WEBPACK VAR INJECTION */(function(__webpack_runtime_parameter_RuntimeVariable_1, __webpack_runtime_parameter_RuntimeVariable_2, __webpack_runtime_parameter_RuntimeVariableSet_dot_Value1, __webpack_runtime_parameter_RuntimeVariableSet_dot_Value2) {if (__webpack_runtime_parameter_RuntimeVariable_1 === 'a') {
    console.log('RuntimeVariable_1 is a');
}

if (__webpack_runtime_parameter_RuntimeVariable_2 === 'b') {
    console.log('RuntimeVariable_2 is b');
}

if (__webpack_runtime_parameter_RuntimeVariableSet_dot_Value1 === 'c') {
    console.log('RuntimeVariableSet.Value1 is c');
}

if (__webpack_runtime_parameter_RuntimeVariableSet_dot_Value2 === 'd') {
    console.log('RuntimeVariableSet.Value2 is d');
}

/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariable_1"], __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariable_2"], __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariableSet.Value1"], __webpack_require__(/*! __webpack_runtime_parameters__ */ 0)["RuntimeVariableSet.Value2"]))

/***/ }),

/***/ 0:
/*!**************************************!*\
  !*** __webpack_runtime_parameters__ ***!
  \**************************************/
/*! no static exports found */
/***/ (function(module, exports) {

module.exports = window["__webpack_runtime_parameters__"]

/***/ })

/******/ });

Now, you can assign window['__webpack_runtime_parameters__'] before loading the bundle to pass variables

<script>
    window['__webpack_runtime_parameters__'] = {
        'RuntimeVariable_1': 'a',
        'RuntimeVariable_2': 'b',
        'RuntimeVariableSet.Value1': 'c',
        'RuntimeVariableSet.Value2': 'd',
    };
</script>
<script src="./index_bundle.js"></script>

Integration with html-webpack-plugin

It is possible to return custom template parameters with html-webpack-plugin. RuntimeParameterPlugin has htmlWebpackPluginTemplateParameters static method to use with html-webpack-plugin. It returns the same parameters as html-webpack-plugin by default with adding runtimeParameters property to each chunk that has them:

{
"htmlWebpackPlugin": {
  "files": {
    "css": [],
    "js": [
      "index_bundle.js"
    ],
    "chunks": {
      "main": {
        "entry": "index_bundle.js",
        "css": [],
        "runtimeParameters": {
          "parameters": {
            "RuntimeVariable_1": {
              "usage": [
                "./index.js"
              ]
            },
            "RuntimeVariable_2": {
              "usage": [
                "./index.js"
              ]
            },
            "RuntimeVariableSet.Value1": {
              "usage": [
                "./index.js"
              ]
            },
            "RuntimeVariableSet.Value2": {
              "usage": [
                "./index.js"
              ]
            }
          },
          "variable": "window[\"__webpack_runtime_parameters__\"]"
        }
      }
    }
  }
}

webpack.config.js

const RuntimeParameterPlugin = require('runtime-parameter-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new RuntimeParameterPlugin([
        'RuntimeVariable_1',
        { name: 'RuntimeVariable_2', isKeySet: false }
        { name: 'RuntimeVariableSet', isKeySet: true }
    ]),      
    new HtmlWebpackPlugin({
        template: './index.ejs',
        inject: false,
        templateParameters: RuntimeParameterPlugin.htmlWebpackPluginTemplateParameters
    })
  ]
}

About

A webpack plugin for injecting parameters into bundles, for example feature flags

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published