Babel 6 只有 JSX 转换，没有其他转换

Question

我想使用babel-plugin-transform-jsx，但在一些 JSX 文件上没有其他转换，目前在stage 3 考虑使用一些 Javascript，即候选。

如果这些 JSX 文件包含以下内容，则转换失败并出现语法错误：

1. 剩余传播运算符{...x, ...y}
2. 异步生成器async function * () {}

目标是提高现代浏览器中代码的调试能力，因为异步生成器的 Babel 转译似乎破坏了 Chrome、Firefox 的开发工具，即断点停止工作，对 this 的引用失败，@ 987654328@ 调用被跳过，以及许多其他观察到的问题。

除了使用 Babel 以上述形式生成 JSX 之外，似乎别无选择——效果很好；一个理想的解决方案是让 Babel 忽略异步生成器和剩余扩展运算符（以及它会引发语法错误的任何其他代码）。

编辑

使用 Victor 建议的插件似乎是正确的解决方案，但在此运行 babel-plugin-syntax-async-generators：

class SearchCriteria {
  async * results (authManager) { }
}

导致错误：

Unexpected token, expected "(" (2:10)
  1 | class SearchCriteria {
> 2 |   *async results(authManager) {
    |          ^

Reproducible here，当您添加syntax-async-generators 插件时。

Answer 1

Babel 有转换插件和语法插件。转换插件将转换应用于您的代码。语法插件允许 Babel 解析特定类型的 JavaScript 语法，而不是对其进行转换。转换插件将启用相应的语法插件，因此您不必同时指定两者。

所以在您的情况下，您需要的是babel-plugin-transform-jsx 转换插件和两个语法插件：babel-plugin-syntax-async-generators、babel-plugin-syntax-object-rest-spread。

对应的.babelrc 将是：

{
  plugins: ["babel-plugin-transform-jsx", "babel-plugin-syntax-async-generators", "babel-plugin-syntax-object-rest-spread"]
}

最小package.json:

{
  "name": "babel-jsx",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "babel index.js"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-plugin-syntax-async-generators": "^6.13.0",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-jsx": "^2.0.0",
    "react": "^16.4.1"
  }
}

如果你在index.js 中有这样的 JavaScript 代码：

import React from 'react'

const MyComp = <div>Hello</div>;

async function* myfunc() {
  const array = [1, 2, 3];
  console.log(...array);
}

并运行命令：

yarn

yarn build

那么输出将是：

$ babel index.js
import React from 'react';

const MyComp = {
  elementName: 'div',
  attributes: {},
  children: ['Hello']
};

async function* myfunc() {
  const array = [1, 2, 3];
  console.log(...array);
}