在 Karma 中设置 NODE_ENV 以运行 webpack 的正确方法是什么？答案

【问题标题】：What's the proper way to set NODE_ENV in Karma for running webpack?在 Karma 中设置 NODE_ENV 以运行 webpack 的正确方法是什么？
【发布时间】：2016-05-30 14:17:35
【问题描述】：

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

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

为此，我使用了 Webpack 的 env-replace-loader，它读取其配置文件 environments.json 并根据 process.env.NODE_ENV 的值设置变量，例如 API_URL。在生产版本中，我使用 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 - 我想，它无法访问节点报告它看不到

【问题讨论】：

试试'"test"'。请注意“。它会替换字面意思，因此如果没有它就会失败。JSON.stringify 将是另一种选择。

标签： node.js gulp karma-runner webpack

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

希望对你也有帮助！

【讨论】：