Question

我正在尝试使用webpack运行业力以使用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
          }]
        }
      }
    ]
  }
}

运行业力时，我得到以下输出：

“未捕获的语法错误：意外的字符串\ 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正确地扩展为变量值。

使用Webpack / Babel运行业力时出现``意外字符串''

1 个答案: