使用 babel 和 Jest 在 ES2017 中意外导入令牌

Question

我尝试在我的项目中使用 Jest 与 bablejs 和 ES2017，根据 Jest Getting Started 页面和 Bablejs config for ES2017 这是我的 .babelrc 文件：

{
  "presets": ["es2017"],
  "env": {
  "test": {
  "presets": ["es2017"]
  }
 }
}

我的包 json 是：

 {
   "name": "",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
   "test": "jest"
   },
  "repository": {
  "type": "git",
  "url": ""
 },
 "author": "",
 "license": "ISC",
 "bugs": {
 "url": ""
},
 "homepage": "",
 "devDependencies": {
 "babel-cli": "^6.26.0",
 "babel-core": "^6.26.0",
 "babel-jest": "^21.2.0",
 "babel-polyfill": "^6.26.0",
 "babel-preset-es2017": "^6.24.1",
 "jest": "^21.2.1"
 }
}

并且知道当我输入 npm test 以开玩笑地运行我的所有测试时，我得到了这些错误：

 ){import StateList from './StateList';

   ^^^^^^
  SyntaxError: Unexpected token import

这意味着它不知道import，我在SF上搜索但没有任何解决方案解决我的问题

Answer 1

babel-preset-es2017 不会转换 import 语句，因为它只包含插件：syntax-trailing-function-commas 和 transform-async-to-generator.

在安装 babel-preset-es2017 时，您还会收到一条警告，指出它已被弃用，取而代之的是 babel-preset-env，其中包含 es201x 预设所包含的所有内容等等。

warning babel-preset-es2017@6.24.1: ?  Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

如Migration guide from es2015 to env所示，是一个drop-in替换。

npm install --save-dev babel-preset-env

并将您的 .babelrc 更改为：

{
  "presets": ["env"]
}

不要将babel-preset-env 与Babel's env option 混淆，我已从您当前的配置中删除了它，因为您对test 环境使用与其他任何环境完全相同的预设，因此它没有任何效果.

您可以将babel-preset-env 配置为仅转换您的目标平台不支持的功能，例如{ "targets": { "node": "current" } } 将仅转换您运行的节点版本不支持的功能。如果没有指定目标，它将改变一切。详情见Env preset documentation。

注意：随着即将发布的 Babel 7 版本，官方包将发布在命名空间@babel 下，这意味着babel-preset-env 将是@babel/preset-env。