javascript - 将 ES2019 转换为 React JSX

Question

我的任务是将 ES2019 编译的 React 代码转换回 JSX。客户丢失了他们的原始文件，我举手完成任务。不幸的是，有几百个文件，当我一个一个地转换它们时，我认为必须有一种方法可以一次编译它们到 JSX。
例如，需要转换的文件片段可能是......

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { Item } from './Item';

const Container = props => {
  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
    component: props.component || Item,
  }));
};

export default Container;

而我想变身...

import React from 'react';
import { Item } from './Item';

const Container = (props) => {
  return <div component={props.component || Item} />;
};

export default Container;

我知道我可以将 JSX 转换为 JS，但是如何在数百个文件中反转呢？

Answer 1

显然有一个 babel 插件可以完全按照您的要求进行操作。 -> babel-js-to-jsxBabel 6 插件从 deugared React.DOM CallExpressions -> 等效的 JSX 转换。目前用于从其他编译到 JS 语言迁移到 ES6+。
它可以用作插件:

require("babel-core").transform(code, {
  plugins: ["babel-transform-js-to-jsx", "syntax-jsx"],
}).code

或从命令行与其他工具组合:

npm install babel-transform-js-to-jsx
cat example.ls | lsc -cb --no-header | js-to-jsx | esformatter -c format.json

babel-js-to-jsx Documentation