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

Question

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

我想配置Karma设置process.env.NODE_ENV为"测试"Webpack,以执行项目的条件构建,以测试环境,其中URL映射到localhost,而不是生产域名.

为此,我使用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.目前,我只是说process.env.NODE_ENV = "test"在karma.conf.js.

有没有更好的方法呢？

---

此外,我尝试使用webpack的DefinePlugin webpack.config.js来设置这个变量:

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- 我想,它无法访问它看不到的节点报告

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,
    }
  });
};

我希望这对你也有帮助!