开玩笑不解析es6:SyntaxError:意外的令牌导入

本文介绍了开玩笑不解析es6:SyntaxError:意外的令牌导入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试使用我的 webpack 项目设置 Jest.当我运行测试时，Jest 抱怨它无法读取 es6 代码.Babel 似乎没有转换我的测试文件.

I am trying to setup Jest with my webpack project. When I run my tests, Jest complains it cannot read es6 code. Babel seems to not transform my test files.

我已经尝试了在互联网上找到的各种解决方案，但我仍然被难住了.也许有更多 Babel/Webpack 知识的人可以查看我的配置并帮助我.

I have tried various solutions I have found on the internet but I'm still stumped. Maybe somebody with more Babel/Webpack knowledge can look at my config and help me out.

相关的package.json deps:

relevant package.json deps:

"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/preset-env": "^7.3.1",
"@babel/preset-flow": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.0.0",
"babel-loader": "^8.0.5",
"babel-plugin-styled-components": "^1.10.0",
"jest": "^24.0.0",
"webpack": "^4.29.0",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14"

config/webpack.config.js:

entry: './src/index.js',
mode: isProduction ? 'production' : 'development',
devtool: isProduction ? 'none' : 'inline-source-map',
bail: true,
devServer: {
  contentBase: 'build',
  compress: true,
  port: 3000,
},
output: {
  path: path.resolve(__dirname, 'build'),
  filename: '[name].[chunkhash].js',
},
module: {
  rules: [
    {
      test: /.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          presets: [
            '@babel/preset-env',
            '@babel/preset-react',
            '@babel/preset-flow',
          ],
          plugins: [
            'babel-plugin-styled-components',
            '@babel/plugin-proposal-class-properties',
          ],
        },
      },
    },
  ],
},
plugins: [
  new HtmlWebpackPlugin({
    template: 'src/index.html',
  }),
  new webpack.DefinePlugin({
    'process.env': JSON.stringify(process.env),
  }),
],

config/jest.config.js

module.exports = {
  verbose: true,
  rootDir: '../',
  setupFiles: ['./config/jest.setup.js'],
  transform: {
    '^.+\.js?$': 'babel-jest',
  },

config/jest.setup.js

import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

Enzyme.configure({ adapter: new Adapter() });

开玩笑的错误:● 测试套件运行失败

jest error:● Test suite failed to run

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

...

Details:

/<...projectpath>/config/jest.setup.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Enzyme from 'enzyme';
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

我想要一些有效的测试运行器！我猜我的转换:babel-jest 在我的 jest.config.js 中什么都不做...

I want some a working test runner! Im guessing my transform: babel-jest is doing nothing in my jest.config.js...

推荐答案

你需要做两件事:

创建一个 Babel 配置文件(babel.config.js):

这是必要的，因为 babel-jest 依赖于传统的 Babel 配置文件，而不是 webpack.从版本 7 Babel 开始支持 JS 配置为 babel.config.js.

This is necessary because babel-jest relies on a traditional Babel config file, not webpack. Since version 7 Babel has supported JS configs as babel.config.js.

当使用 JS Babel 配置(例如与 .babelrc 相反)时，Jest 还会在 node_modules 中编译模块.AFAIK 按照惯例，这必须在项目的根目录中，与 jest 配置文件一起.

When using a JS Babel config (as opposed to a .babelrc, for example) Jest also compiles modules in node_modules. AFAIK by convention this must be in the root of your project, alongside the jest configuration file.

这是一个基于 webpack.config.js 文件中 Babel 选项的配置:

Here is a config based on the Babel options in your webpack.config.js file:

// babel.config.js
module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-react',
    '@babel/preset-flow',
  ],
  plugins: [
    'babel-plugin-styled-components',
    '@babel/plugin-proposal-class-properties',
  ]
}

安装babel-core桥接版本:

Install the babel-core bridge version:

npm install babel-core@7.0.0-bridge.0 --save-dev

来自github.com/babel/babel-bridge:

这个存储库包含我们所谓的桥接"包，旨在简化使用babel-core"作为 Babel 6 对等依赖项的库的转换.

Babel 7 过渡到作用域的问题是，如果一个包依赖于 Babel 6，他们可能希望同时添加对 Babel 7 的支持.因为 Babel 7 将作为 @babel/core 而不是 babel-core 发布，维护人员无法在不进行重大更改的情况下进行转换.例如

The issue with Babel 7's transition to scopes is that if a package depends on Babel 6, they may want to add support for Babel 7 alongside. Because Babel 7 will be released as @babel/core instead of babel-core, maintainers have no way to do that transition without making a breaking change. e.g.

这篇关于开玩笑不解析es6:SyntaxError:意外的令牌导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！