Build Toggles

It is common to switch in JavaScript projects based on where they are being run. You can do this quite easily with webpack as its supports dead code elimination based on environment variables.

Add different targets in your package.json scripts:

  1. "build:test": "webpack -p --config ./src/webpack.config.js",
  2. "build:prod": "webpack -p --define process.env.NODE_ENV='\"production\"' --config ./src/webpack.config.js",

Of course I am assuming you have npm install webpack --save-dev. Now you can run npm run build:test etc.

Using this variable is super easy as well:

  1. /**
  2.  * This interface makes sure we don't miss adding a property to both `prod` and `test`
  3.  */
  4. interface Config {
  5.   someItem: string;
  6. }
  8. /**
  9.  * We only export a single thing. The config.
  10.  */
  11. export let config: Config;
  13. /**
  14.  * `process.env.NODE_ENV` definition is driven from webpack
  15.  *
  16.  * The whole `else` block will be removed in the emitted JavaScript
  17.  *  for a production build
  18.  */
  19. if (process.env.NODE_ENV === 'production') {
  20.   config = {
  21.     someItem: 'prod'
  22.   }
  23.   console.log('Running in prod');
  24. } else {
  25.   config = {
  26.     someItem: 'test'
  27.   }
  28.   console.log('Running in test');
  29. }

We use process.env.NODE_ENV just because it is conventional in a lot of JavaScript libraries themselves e.g. React.