构建切换

通常可以根据 JavaScript 项目的运行环境来切换它们，通过 webpack 可以很轻松的切换环境变量。

在你的 package.json script 里，添加不同的编译目标：

  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"

当然，假设你已经安装了 webpack npm install webpack，现在，你可以运行 npm run build:test 了。

使用环境变量也超级简单：

  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. }

TIP

我们使用 process.env.NODE_ENV 仅仅是因为绝大多数 JavaScript 库中都使用此变量，例如：React。

原文: https://jkchao.github.io/typescript-book-chinese/tips/buildToggles.html