将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，但如何在数百个文件中反向进行此操作？

- Darren

---

你看过 babel-js-to-jsx 吗？ - codemonkey

@codemonkey。 我已经尝试了，但就是无法让它工作起来。 - Darren

这只是一个猜测，但也许如果你有.map文件，你可以更轻松地生成源代码文件（但我不知道React构建系统是否会生成它们）。 - utopman

@Darren，你能否分享一下使用babel-js-to-jsx时遇到的错误？ - BogdanBiv

@BogdanBiv。我相信这是一个“Unexpected token”问题。但是那是一段时间之前的事情，所以我无法完全记住错误信息。最终，我使用了https://www.npmjs.com/package/babel-plugin-transform-react-createelement-to-jsx插件完成了任务。 - Darren

Answer 1

显然，有一个 Babel 插件可以做到您所需的功能。 -> babel-js-to-jsx

Babel 6 插件用于将去糖化的 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 文档

- Hithesh k