從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

根據文件：

Babel 6插件轉換為desugared React.DOM CallExpressions - >相當於JSX。 目前用於從其他編譯到JS語言遷移到ES6 +。

它可以用作插件：

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