如何在 Jest 中使用 babel-preset-env [英] How to use babel-preset-env with Jest

问题描述

我们正在更新我们的 API，Babel 的 Henry Zhu 提醒我使用这个名为 babel-preset-env 的预设来替代 babel-preset-es2015code> 和 babel-preset-es2018.

现在，我在理解处理所有事情的最简单方法时遇到了困难.

• 我们的 API 使用 node v8.x 和 async/await，原生 promises
• 我想要传播运算符
• 我想要管道操作员
• 我想要导入/导出语法
• 我想支持 Jest
• 我喜欢 babel-node 如何将 API 转换为内存

如果我只向您展示我们配置的当前位置，这会更容易:

<块引用>

.babelrc

<代码> {预设":["环境",{目标":{节点":当前"}},笑话"]}

<块引用>

package.json

<代码> {脚本":{"test": "node --harmony-async-await node_modules/jest/bin/jest.js","start:local": "NODE_ENV=localhost npm run babel-node -- warpcore/server.js","start": "npm run babel-node -- warpcore/server.js","babel-node": "babel-node --presets=es2015,stage-2"},依赖关系":{"babel-polyfill": "^6.23.0"},开发依赖":{"babel-cli": "^6.24.1","babel-core": "^6.25.0","babel-eslint": "^7.2.3","babel-jest": "^20.0.3","babel-preset-env": "^1.6.0","babel-preset-es2015": "^6.24.1","babel-preset-es2018": "^1.0.0","babel-preset-stage-2": "^6.24.1",开玩笑":^20.0.4"},开玩笑":{"testURL": "http://localhost:8080",测试环境":节点"}}

我不确定如何组织这些事情才能最好地实现我上面的项目符号列表.

<块引用>

我应该做哪些改变?

• 我认为 babel-node 脚本需要更改
• 我怀疑我可以删除其中一些软件包
• 我怀疑 .babelrc 文件不是最佳的

解决方案

我想我已经成功了.解决办法如下:

<块引用>

.babelrc

问题中贴的那个有语法错误，因为env预设需要用方括号[]括起来(来自:http://babeljs.io/docs/plugins/preset-env/)

正确:

<代码> {预设":[[环境"，{目标":{节点":当前"}}],笑话"]}

<块引用>

package.json

问题中发布的内容有一些可以删除的内容:

<代码> {脚本":{"test": "jest --verbose","start:local": "cross-env NODE_ENV=localhost babel-node -- app.js","babel-node": "babel-node --presets=env"},依赖关系":{"babel-cli": "^6.24.1","babel-preset-env": "^1.6.0"},开发依赖":{"babel-eslint": "^7.2.3","babel-jest": "^20.0.3",开玩笑":^20.0.4"},开玩笑":{"testURL": "http://localhost:8080",测试环境":节点"}}

在我看来更干净.如果您想明确包含或排除任何预设，或者指定要支持的浏览器，您可以从 .babelrc 文件中调整预设.

We are in the midst of updating our API, and Henry Zhu from Babel alerted me to this preset called babel-preset-env to replace need for babel-preset-es2015 and babel-preset-es2018.

Now, I am encountering difficulty understanding the simplest way to handle everything.

• Our API uses node v8.x and async/await, native promises
• I want spread operator
• I want pipeline operator
• I want import/export syntax
• I want to support Jest
• I like how babel-node transpiles the API into memory

This will be easier if I just show you the current position of our config:

.babelrc

 {
   "presets": [
     "env",
       {
         "targets": {
           "node": "current"
         }
       },
     "jest"
   ]
 }

package.json

 {
   "scripts": {
     "test": "node --harmony-async-await node_modules/jest/bin/jest.js",
     "start:local": "NODE_ENV=localhost npm run babel-node -- warpcore/server.js",
     "start": "npm run babel-node -- warpcore/server.js",
     "babel-node": "babel-node --presets=es2015,stage-2"
   },
   "dependencies": {
     "babel-polyfill": "^6.23.0"
   },
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.25.0",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^20.0.3",
     "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2018": "^1.0.0",
     "babel-preset-stage-2": "^6.24.1",
     "jest": "^20.0.4"
   },
   "jest": {
     "testURL": "http://localhost:8080",
     "testEnvironment": "node"
   }
 }

I am uncertain how these things need to be organized to best achieve my bullet list above.

What changes should I make?

• I think the babel-node script needs to change
• I suspect I can remove some of these packages
• I suspect the .babelrc file isn't optimal

解决方案

I think I got it working. Here is the solution:

.babelrc

The one posted in the question has a syntax error because the env preset needs to be wrapped in brackets[] (from: http://babeljs.io/docs/plugins/preset-env/)

Correct:

 {
   "presets": [
     ["env",
       {
         "targets": {
           "node": "current"
         }
       }],
     "jest"
   ]
 }

package.json

The one posted in the question has a few things that can be removed:

  {
     "scripts": {
       "test": "jest --verbose",
       "start:local": "cross-env NODE_ENV=localhost babel-node -- app.js",
       "babel-node": "babel-node --presets=env"
    },
    "dependencies": {
      "babel-cli": "^6.24.1",
      "babel-preset-env": "^1.6.0"
    },
    "devDependencies": {
      "babel-eslint": "^7.2.3",
      "babel-jest": "^20.0.3",
      "jest": "^20.0.4"
    },
    "jest": {
      "testURL": "http://localhost:8080",
      "testEnvironment": "node"
    }
  }

Much cleaner in my opinion. You can modulate the presets from the .babelrc file if you want to explicitly include or exclude any, or specify which browsers to support.

这篇关于如何在 Jest 中使用 babel-preset-env的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！