webpack 的自定义错误：检查环境变量

Question

我有一个用webpack编译的项目。有单独的开发和生产版本，由 NODE_ENV 环境变量区分。对于开发版本，需要另一个环境变量：REPO_PATH.

webpack 中是否有一种方法可以检查 REPO_PATH 是否存在，抛出自定义错误并在未设置时终止构建？

我当前的解决方案依赖于 package.json 个脚本：

package.json

{
  ...
  "scripts": {
    "dev": "if test -z $REPO_PATH; then echo \"Please set REPO_PATH"; exit 0; fi && NODE_ENV=development webpack --progress --hide-modules"
  }
}

这可行，但并不理想，因为我们的一些开发人员使用 windows 机器并且上面的 if/then 语句特定于 unix 系统。

它似乎也应该可以通过一个小插件或类似的东西来实现，但我不知道我在寻找什么。

Answer 1

到目前为止我想出的最好的解决方案是编写一个简单的 webpack 插件来检查列出的每个环境变量是否存在，如果有任何缺失则抛出错误。

var externalDevLibraries = [
  'VARIABLE_1_NAME',
  'VARIABLE_2_NAME',
];


class EnvCheckerPlugin {

  apply(compiler) {
    compiler.plugin("environment", function (compilation, callback) {
      console.log('Checking for necessary env variables...')

      var missingEnvVars = [];
      for (let i = 0, l = devEnvVars.length; i < l; i ++) {
        var env = devEnvVars[i];
        if (!process.env[env]) {
          missingEnvVars.push(env);
        }
      }

      if (missingEnvVars.length) {
        console.error(chalk.yellow("Please set the following env variables.\nThen, try re-running the dev build."));
        console.error(chalk.red(`  - ${missingEnvVars.join('\n  * ')}`));
        throw new Error('Missing env variables. Please see additional logging above');
      }
    });
  }
};

此插件仅在NODE_ENV=development时使用，如下：

if (process.env.NODE_ENV === 'development') {
  // ... other dev-specific stuff

  module.exports.plugins = (module.exports.plugins || []).concat([
      // other dev-specific plugins... 
      new EnvCheckerPlugin(),
  ]);

}

webpack 的自定义错误：检查环境变量

Custom errors for webpack: checking for env variables

javascript

webpack

webpack-3