javascript - 使用 webpack/babel 运行 karma 时出现“意外字符串”

Question

我正在尝试使用 webpack 运行 karma 以使用 babel 预处理代码，然后可以使用 mocha 对其进行测试。但是，每当我运行它时，我都会出错。

spec/tests.spec.js:

import 'chai/register-expect';

karma.conf.js:

const webpackConfig = require('./webpack.config.js');

const tests = './spec/**/*.spec.js'

module.exports = function(config) {
  config.set({
    singleRun: true,
    browsers: ['Chrome'],
    frameworks: ['mocha'],
    files: [
      tests
    ],
    preprocessors: {
      tests: ['webpack'],
    },
    webpack: webpackConfig,
  })
}

webpack.config.js:

module.exports = {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env', {
            'modules': false
          }]
        }
      }
    ]
  }
}

当我运行 karma 时，我得到以下输出:

'Uncaught SyntaxError: Unexpected string\nat http://localhost:9876/base/spec/tests.spec.js?af68737606dd067ef21aa6efadfc004fb1d05454:1:8\n

对应于 import 行。

如果我从测试中删除所有 es6 代码，那么它会成功运行，这意味着 webpack/babel 没有被正确调用。

知道为什么这不起作用吗？

Answer 1

所以这与任何工具都无关，结果证明是 JS 陷阱。

在 karma.conf.js 中我正在做:

const tests = './spec/**/*.spec.js'
...
    preprocessors: {
      tests: ['webpack'],
    }

这里的问题是 tests 作为对象键转换为字符串 "tests"。

解决方案是使用:

preprocessors: {
  [tests]: ['webpack'],
}

以便 tests 正确扩展为变量值。