Question

我想使用babel-plugin-transform-jsx，但是没有对其他JSX文件进行任何其他转换，而这些文件中的某些Javascript当前被视为stage 3，即候选对象。

如果这些JSX文件包含以下内容，则翻译失败并显示语法错误

剩余价差运营商{...x, ...y}
异步生成器async function * () {}

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

似乎没有其他方法可以使用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);
}

Babel 6仅具有JSX转换而没有其他转换

编辑

1 个答案: