javascript - 业力 + Webpack2 : module parse failed and imports not found

Question

我正在尝试使用 webpack2 为我的 React.js + Redux 项目编写测试来捆绑所有内容，并且我想使用 Karma + mocha 作为我的测试运行程序。我已经设法按顺序获取我的 webpack.conf.js 和 karma.conf.js 文件并运行简单的测试(以及编译我的包)，但是 karma 似乎每当测试有 ... 运算符或 import 关键字时就会阻塞。

我的项目结构相当简单；配置文件位于项目的 / 中，react 文件位于 /components/ 中，测试(名为 *.test.js)位于 /测试/。每当我使用 ... 包含测试时，都会收到以下错误:

 Error: Module parse failed: /....../components/actions.jsx Unexpected token (5:2)
  You may need an appropriate loader to handle this file type.
  |
  | module.exports = {
  |   ...generatorActions,
  |   ...creatorActions
  | }
  at test/actions/actions.test.js:1088

如果我删除 ...，但保留导入语句，我会得到:

ERROR in ./components/actions.jsx
Module not found: Error: Can't resolve 'creatorActions' in '/..../components'
 @ ./components/actions.jsx 2:0-43
 @ ./test/actions/actions.test.js
Firefox 53.0.0 (Mac OS X 10.12.0) ERROR
  Error: Cannot find module "generatorActions"
  at test/actions/actions.test.js:1090

作为引用，文件 actions.jsx 如下所示:

import generatorActions from 'generatorActions'
import creatorActions from 'creatorActions'

module.exports = {
  ...generatorActions,
  ...creatorActions
}

和actions.test.js看起来像这样:

const expect = require('expect')

const actions = require('../../components/actions.jsx')

describe('Actions', () => {
  it('Should exist', () => {
    expect(actions).toExist()
  })
})

我不明白的一件奇怪的事情是，错误消息中的行(1088 和 1090)无法对应于普通文件，所以我只能假设它们对应于生成的 webpack 包 - 所以我相信 webpack 正在被调用。如果我完全注释掉 actions.jsx 的内容，我就通过了虚拟测试(一个断言 expect(1).toBe(1) 的简单测试)。这是我的 webpack.config.js:

function buildConfig(env) {
  return require('./build/webpack/webpack.' + (env || 'dev') + '.config.js');
}

module.exports = buildConfig;

我的 webpack.dev.config.js 看起来像:

var path = require('path');
var webpack = require('webpack');
const appRoot = require('app-root-path').path

module.exports = {
    context: path.resolve(appRoot, 'components'),
    devtool: 'eval',
    plugins: [
           new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
        }
    })
   ],
    entry: {
      app: './App.jsx',
    },
    output: {
      path: path.resolve(appRoot, 'public/'),
      filename: '[name].js'
    },
    resolve: {
      modules: [
        path.resolve(appRoot, "components"),
        path.resolve(appRoot, "components/common"),
        path.resolve(appRoot, "components/common/presentational"),
        path.resolve(appRoot, "components/common/components"),
        path.resolve(appRoot, "components/creator"),
        path.resolve(appRoot, "components/creator/actions"),
        path.resolve(appRoot, "components/creator/reducers"),
        path.resolve(appRoot, "components/creator/presentational"),
        path.resolve(appRoot, "components/creator/components"),
        path.resolve(appRoot, "components/generator"),
        path.resolve(appRoot, "components/generator/presentational"),
        path.resolve(appRoot, "components/generator/stateful"),
        path.resolve(appRoot, "components/generator/actions"),
        path.resolve(appRoot, "components/generator/reducers"),
        path.resolve(appRoot, "node_modules")
      ],
      extensions: ['.js', '.jsx']
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          query: {
            presets: [
              ["es2015", {modules: false}],
              'react',
              'stage-0',
              [
                "env", {"targets": {"browsers": ["last 2 versions"]}}
              ]
            ],
            plugins: [
              'syntax-dynamic-import',
              'transform-async-to-generator',
              'transform-regenerator',
              'transform-runtime',
              'babel-plugin-transform-object-rest-spread'
            ]
          }
        }
      ]
    }
  }

和我的karma.conf

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

module.exports = function(config) {
  config.set({
    browsers: ['Firefox'],
    singleRun: true,
    frameworks: ['mocha'],

    files: [
      'test/**/*.test.js'
    ],

    preprocessors: {
      'test/**/*.js': ['webpack'],
      'components/**/*.js': ['webpack'],
      'components/*.js': ['webpack']
    },
    reporters: ['mocha'], //, 'coverage', 'mocha'],
    client:{
      mocha:{
        timeout: '5000'
      }
    },
    webpack: webpackConfig,

    webpackServer:{
      noInfo: true
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    concurrency: Infinity
  })
}

Answer 1

我终于明白了!我需要做的就是将行 const webpackConfig = require('./webpack.config.js'); 更改为 const webpackConfig = require('./webpack.config.js' )(); 在我的 karma.conf.js