node.js - 在 Karma 中设置 NODE_ENV 以运行 webpack 的正确方法是什么？

Question

我正在使用 Webpack 构建我的项目并使用 Karma 运行测试。

我想配置 Karma 以将 process.env.NODE_ENV 设置为“测试”，以便 Webpack 执行项目的条件构建，以使用映射到本地主机而非生产域名的 URL 来测试环境。

为此，我使用了 Webpack 的 env-replace-loader，它读取其配置文件 environments.json 并设置变量，例如 API_URL，具体取决于process.env.NODE_ENV 的值。在生产构建中，我使用 Gulp 设置 process.env.NODE_ENV 并启动 webpack。它有效。

我想在测试构建中设置 process.env.NODE_ENV = 'test'，通过运行 karma start karma.conf.js 启动。目前我只是在 karma.conf.js 中说 process.env.NODE_ENV = "test"。

有更好的方法吗？

---

此外，我尝试使用 webpack.config.js 中 webpack 的 DefinePlugin 来设置这个变量，如下所示:

const webpackConfig = {
    ...
    plugins: [
        new webpack.DefinePlugin({
            process.env: {'NODE_ENV': 'test'}
        }),
        ...
    ],
    ...
}

它不会工作:webpack env-replace-loader 诅咒 Module build failed: TypeError: Cannot read property 'URL' of undefined - 我想，它无法访问它没有看到的 Node 报告

Answer 1

在你的 webpack 配置中试试这个 JSON.stringify('name') 代替。尝试这样的事情:

 plugins: [
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: JSON.stringify('production'),
            APP_ENV: JSON.stringify('browser')
        },
    })
  ],

这适用于运行示例或类似内容的 webpack。例如，我在运行示例时使用它来要求 CSS，但在编译生产时它会被忽略。

我在 Karma 配置中遇到了同样的问题，但我修复了将插件添加到 Karma 配置文件的 webpack 部分的问题。例如，这是我的文件:

const webpack = require('webpack');

module.exports = function(config) {
  config.set({
    browsers: ['PhantomJS'],
    files: [
      'tests.webpack.js',
      {
        pattern: 'src/**/__tests__/*.js',
        included: false,
        served: false,
        watched: true
      }
    ],
    frameworks: ['jasmine'],
    preprocessors: {
      'tests.webpack.js': ['webpack', 'sourcemap', 'coverage'],
    },
    reporters: ['progress', 'notification'],
    webpack: {
      devtool: 'inline-source-map',
      module: {
        loaders: [
          { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' }
        ]
      },
      plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('test')
            }
        })
      ],
      watch: true
    },
    webpackServer: {
      noInfo: true,
    }
  });
};

希望对你也有帮助!