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

【问题标题】：Custom errors for webpack: checking for env variableswebpack 的自定义错误：检查环境变量
【发布时间】：2019-06-24 06:26:53
【问题描述】：

我有一个用 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 系统。

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

【问题讨论】：

标签： javascript webpack webpack-3

【解决方案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(),
  ]);

}

【讨论】：