Webpack 将Mocha与Babel一起使用时意外的令牌导入

我知道在某种程度上，这是一个重复的问题，但迄今为止我发现的任何提示都没有帮助，这就是我决定再次提问的原因

我在Mocha中创建了一个简单的测试，当我尝试运行它时，我不断得到

意外的令牌导入

错误。我在这里和其他地方尝试了许多不同的解决方案，但似乎没有一个与我的案例相关。由于我是一名初级程序员，我不理解我找到的所有答案，因此我无法在这里列出所有答案。不过，最常给出的提示是使用

--编译器js:babel core/register。

但是，在我的情况下，这不起作用。下面是我的

包.json

：

`{
  "name": "beer-guru",
  "version": "1.0.0",
  "description": "A simple app displaying info about various beers",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --inline --hot --open",
    "prettier": "prettier --single-quote --write ./app/**/*.js",
    "lint": "eslint **/*.js",
    "test": "mocha **/*.test.js"
  },
  "keywords": [
    "React.js"
  ],
  "author": "Maciek Maslowski",
  "license": "ISC",
  "dependencies": {
    "lodash": "^4.17.4",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-router": "^4.1.2",
    "react-router-dom": "^4.1.2",
    "styled-components": "^2.1.1",
    "styled-tools": "^0.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-eslint": "^7.2.3",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "eslint": "^4.4.1",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-react": "^7.2.1",
    "expect": "21.0.2",
    "html-webpack-plugin": "^2.26.0",
    "mocha": "3.5.3",
    "prettier": "^1.5.3",
    "react-redux": "5.0.6",
    "redux": "3.7.2",
    "supertest": "3.0.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }
}`

我的

.babelrc

：

"presets": [
    "es2015", "react", "env"
  ],
  "plugins": ["transform-class-properties"]

和我的

webpack.config.js

：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],

  devServer: {
      historyApiFallback: true
  },

  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loaders: ["babel-loader", "eslint-loader"]}
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

这里有人知道是否有可能用这个配置运行Mocha测试吗？如果是这样，有人知道怎么做吗

---

非常感谢所有提示

我也有同样的问题，然后我才开始明确要求babel/core：

mocha --require @babel/register

---

你把测试和捆绑包搞混了。webpack通过您配置的加载程序捆绑您的代码，加载程序负责在您请求时转换代码。当你们运行你们的测试时，你们并没有浏览网页，你们是在mocha上运行的，mocha是一个独立的实体。您需要明确地告诉mocha，您需要将正在测试的代码（可能还有测试本身）转换为mocha能够理解的语言

为此，请使用已安装的依赖项执行以下操作：

mocha——编译器js:babel-core/register

---

其他方面的更多信息。

我不认为这会帮助所有面临这个问题的人，但既然我发布了这个问题，我也在分享帮助我的解决方案。我首先尝试使用下面的命令运行Mocha，正如上面的答案所建议的：

Mocha——需要babel core/register——编译器js:babel core/register

。但是，这导致了一个不同的问题，因为我一直收到以下错误：

importtransformcss，{getStylesForProperty}from'；语法错误：意外的令牌导入

。然而，事实证明，该错误是由

节点_modules

文件夹中的一个文件引起的。因此，我使命令中的路径更加具体，以防止Mocha查看

节点_模块

（在我的例子中，它是

app/***.test.js

，而不是

***.test.js

），现在它可以正常工作了

摩卡现在在

mocha@7.0.0-esm1

：

谢谢！不幸的是，当我用这个命令运行mocha时，我得到了上面描述的错误：

importtransformcss，{getStylesForProperty}from'；SyntaxError:意外的令牌导入

，我不知道如何处理：-）已解决-请参阅下面发布的我自己的答案。你的答案没有错，但我认为其他用户可能会忽略我也没有注意到的东西，所以我在下面发布了一个较长的解释。此外，您建议我尝试使用的命令也可以使用，但是，当我解决了回答中描述的问题时，它也可以在没有

的情况下使用--需要babel core/register

。再次感谢！谢谢这就是我用这个命令运行Mocha时得到的结果：

importtransformcss，{getStylesForProperty}from'；语法错误：意外的令牌导入

。你知道如何解决这个问题吗：-）？好的，问题解决了-如果有兴趣，请看我自己的答案。不过，您的命令很有效-我只是忽略了一些明显的问题，但由于其他用户也可能会遇到这种情况，我决定发布自己的答案。@maciek，我建议您接受自己的答案，因为我的答案并不能真正解决这个问题！顺便说一句，令人惊讶的是，忽视错误的道路、好的捕获之类的东西是多么容易。不幸的是，这不是我的问题。我在ES6中编写的测试中遇到“意外令牌导入”错误。似乎所有那些

--require

和

--compiler

参数都无法说服mocha使用babel加载测试。mocha现在对ESM有了本机支持。详情请参阅。