如何在缺少變量的情況下從代碼中手動拋出 webpack 錯誤？

Question

我有一些代碼，其中有占位符。 在將代碼推送到生產環境時，我需要填寫一些我還不知道的變量。 現在我在一個名為constants.js的文件中有以下內容。

export const PublicAddress = process.env.PUBLIC_ADDRESS || console.error( "Public address is not yet set." );

這段代碼工作得很好，當 PUBLIC_ADDRESS 為空時，控制台會記錄一個錯誤。

但是，如果 PUBLIC_ADDRESS 為空並且我忘記硬編碼另一個值，我希望 Webpack 在編譯時拋出錯誤。 當我將它編譯用於生產時，不要忘記輸入一個真正的值，這一點非常重要。

那可能嗎？

Answer 1

通常，您可以在自己的 webpack 插件中提供這種檢查。 這是一個自定義插件的基本實現，它檢查數組中的所有字符串是否都引用了一個環境變量：

class EnvVarExistPlugin {
  apply(compiler) {
    const envsVarToCheck = ['TEST_VAR', 'TEST_VAR2'] // put your env var list here
    envsVarToCheck.forEach(envVar => {
      if (!!!process.env[envVar]) {
        throw new Error(`Environment variable : ${envVar} is missing`);
      }
    });
  }
 };

 module.exports = EnvVarExistPlugin

然后在你的webpack.config.js中注冊你的插件：

const { resolve } = require("path");
const EnvVarExistPlugin = require("./pathToYourPlugin");
require('dotenv').config({ path: './.env' }); // adapt path to your env file

module.exports = {
 entry: resolve(__dirname, "src/index.js"),
 mode: 'development',
 output: {
   path: resolve(__dirname, "dist"),
   filename: "bundle.js"
 },
 plugins: [new EnvVarExistPlugin()]
};