从js转换为jsx的工具

Question

我很好奇是否有任何转换工具将从普通JS转换为JSX.Babel会将JSX转换为JS,但据我所知它不能回到JSX.

从示例:

var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});

有没有其他方向的工具:

var Nav;
// Input (JS):
var app = React.createElement(Nav, {color:"blue"});
// Output (JSX):
var app = <Nav color="blue" />;

谢谢!

Answer 1

我自己还没有尝试过，但显然现在有一个 babel 插件可以完全按照你的要求做。

babel-js-to-jsx

https://github.com/JoeStanton/babel-js-to-jsx

根据文档：

Babel 6 插件用于从脱糖的 React.DOM CallExpressions 转换 -> 等效的 JSX。目前用于从其他编译语言迁移到 ES6+ 到 JS 语言。

它可以用作插件：

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

或者从命令行与其他工具进行组合：

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