将Mocha与Babel一起使用时出现意外的令牌导入 [英] unexpected token import when using Mocha with Babel

问题描述

在某种程度上，我知道这是一个重复的问题，但是到目前为止，我发现的所有提示都无济于事，这就是为什么我决定再次询问.

I know this is, in a way, a duplicate question, but none of the tips I've found so far helped, which is why I decided to ask again.

我在Mocha中创建了一个简单的测试，当我尝试运行它时，我总是收到unexpected token import错误.我尝试了在这里和其他地方找到的许多不同的解决方案，但是它们似乎都与我的情况无关.由于我是初级程序员，所以我不理解所找到的所有答案，因此无法在此处列出所有答案.不过，最常给的提示是使用--compilers js:babel-core/register.，但是，这在我的情况下不起作用.以下是我的package.json:

I created a simple test in Mocha, and when I try to run it I keep getting the unexpected token import error. I've tried many different solutions found here and elsewhere, but none of them seem to be relevant to my case. Since I'm a junior level programmer, I did not understand all the answers I've found and thus I'm unable to list them all here. The tip that was given most often, though, was to use --compilers js:babel-core/register. This, however, did not work in my case. Below is my package.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测试?如果是这样，有人知道吗?

Does anyone here have any idea if it's possible to run Mocha tests with this config at all? And if so, does anyone know how?

非常感谢您提供的所有提示！

Many thanks for all tips!

推荐答案

您正在将测试与软件包混淆. webpack通过配置的加载器捆绑您的代码，如果您要求，加载器负责对其进行转换.运行测试时，您不是通过Webpack进行测试，而是在Mocha(这是一个单独的实体)上运行测试.您需要明确地告诉mocha，您需要将正在测试的代码(可能还有测试本身)转换成它可以理解的语言.

You're confusing tests with the bundle. webpack bundles your code through your configured loaders, which are in charge of transforming it if you request it. When you run your tests, you're not going through webpack, you're running them on mocha, which is a separate entity. You need to tell mocha explicitly that you need to transform the code you're testing (and the tests themselves, probably) into a language that it understands.

要执行此操作，请使用已经安装的依赖项进行操作:

In order to do this, using the dependencies that you already have installed, you would do:

mocha --compilers js:babel-core/register

有关此博客文章的详细信息等等.

这篇关于将Mocha与Babel一起使用时出现意外的令牌导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！