5

我们正在更新我们的 API，来自 Babel 的 Henry Zhu 提醒我这个预设被称为babel-preset-env替换需要babel-preset-es2015和babel-preset-es2018.

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

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

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

.babelrc

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

包.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"
   }
 }

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

我应该做出哪些改变？

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

3 回答 3

7

如果你想使用babel-preset-env作为jest 的babel-preset-es2015（已弃用）的替代品，那么你必须确保“env”配置中的“ modules ”属性设置为“commonjs” ”。

这是一个示例性配置：

.babelrc

{     
  "env": {
    "test": {
      "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
      ],
      "presets": [
        "jest",
        "react",
        [
          "env",
          {
            "debug": false,
            "modules": "commonjs",
            "targets": {
              "node": "current"
            },
            "useBuiltIns": true
          }
        ]
      ]
    }
  }
}

您可以在 中看到env.test，预设env（即“babel-preset-env”配置）将“模块”设置为“commonjs”。这很重要，否则您将收到“SyntaxError: Unexpected token import”。

为了完整起见，这里是一个简单的测试：

ExampleButton.test.jsx

import ExampleButton from './ExampleButton';
import React from 'react';
import renderer from 'react-test-renderer';

test('Example Test', () => {
  const component = renderer.create(<ExampleButton />);
  const json = component.toJSON();
  expect(json.type).toBe('button');
});

ExampleButton.jsx

import React from 'react';

class ExampleButton extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        {this.props.text}
      </button>
    )
  }
}

export default ExampleButton;

对于我的 Babel 设置，我使用了以下依赖项：

"babel-core": "6.26.0",
"babel-jest": "21.2.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"jest": "21.2.1",
"react-test-renderer": "16.1.1",
于 2017-11-27T16:39:14.207 回答
5

我想我成功了。这是解决方案：

.babelrc

问题中发布的内容有语法错误，因为 env 预设需要用方括号 [] 括起来（来自：http ://babeljs.io/docs/plugins/preset-env/ ）

正确的：

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

包.json

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

  {
     "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"
    }
  }

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

于 2017-07-23T18:19:39.140 回答
0

这是我找到的解决方案：

{
  "presets": ["@babel/env", "@babel/react"]
}
于 2019-10-03T08:43:36.627 回答