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

Question

我尝试使用 Jest with bablejs and ES2017 in my project, according to the Jest Getting Started page and also Bablejs config for ES2017 这是我的 .babelrc 文件 :

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

我的 package.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.

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 所示，它是一个直接替换。

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

并将您的 .babelrc 更改为：

{
  "presets": ["env"]
}

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

您可以将 babel-preset-env 配置为仅转换您的目标平台不支持的功能，例如 { "targets": { "node": "current" } } 将仅转换您使用的 Node 版本不支持的功能运行。如果没有指定目标，它将改变一切。有关详细信息，请参阅 Env preset documentation.

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

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

unexpected token import in ES2017 with babel and Jest

node.js

babeljs

jestjs

ecmascript-2017