有没有办法在原生 CommonJS 环境中使用 JSX?

IT技术 reactjs commonjs react-jsx electron
2021-05-15 23:14:27

我正在一个具有原生CommonJS支持requiremodule的环境中开始一个新项目-它是一个 atom-shell 项目,不可能使用诸如 Browserify 或 webpack AFAIK 的预编译步骤

我可以在我的app.jsx入口点文件上使用 JSX index.html,该文件在 my 上声明,这是因为JSXTransformer之前声明过:

<script src="scripts/vendor/JSXTransformer.js"></script>
<script type="text/jsx" src="scripts/app.jsx"></script>

我希望能够对作为 CommonJS module导入我的app.jsxmodule中的子module使用 JSX 语法

// This raises an Error, the XML-like tags are not supported
var Grid = require('./scripts/grid.jsx');

据我所知,我将被迫放弃 JSX 语法,并为通过require. 在这种情况下,是否还有其他方法可以继续使用 JSX?

2个回答

[更新]

现在 JSX 转换器已被弃用而支持 Babel,您可以使用 Babel 的require 钩子在类似 CommonJS 的环境中支持 JSX:

用法

require("babel/register");

节点所需的所有后续文件,扩展名为.es6, .es,.jsx.js将由 Babel 转换。填充工具也需要自动。

注意:默认情况下,所有需要都node_modules将被忽略。您可以通过以下方式传递忽略正则表达式来覆盖它:

require("babel/register")({
  // This will override `node_modules` ignoring - you can alternatively pass
  // an array of strings to be explicitly matched or a regex / glob
  ignore: false
});

[旧答案]

如果它是一个 Node.js 环境(就像 atom-shell 一样),你可以使用node-jsx

require('node-jsx').install()
require("./myComponent.js");

.jsx如果需要,您还可以使用扩展程序:

require('node-jsx').install({extension: '.jsx'})
require("./myComponent.jsx");

您可以简单地复制源目录:

cp -R src dist

然后使用react-tools 中的 jsx工具

jsx -x jsx dist dist

并删除 jsx 文件

find dist -iname '*.jsx' | xargs rm

也许有更简洁的方法可以做到这一点,但现在应该足够了。