4

我正在一个对模块具有原生CommonJS支持的环境中启动一个新项目——它是一个 atom-shell 项目，不可能使用诸如 Browserify 或 webpack AFAIK 之类的预编译步骤。require

我可以在 myapp.jsx上声明的入口点文件上使用 JSX index.html，这是因为JSXTransformer之前声明过：

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

我希望能够对在我的app.jsx模块中作为 CommonJS 模块导入的子模块使用 JSX 语法：

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

据我了解，我将被迫放弃 JSX 语法，并为通过require. 在这种情况下是否有任何替代方法可以继续使用 JSX？

4

2 回答 2

7

[更新]

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

用法

require("babel/register");

节点所需的所有后续文件，扩展名为.es6,和 ，.es将由Babel 转换。polyfill也是自动需要的。.jsx.js

注意：默认情况下，所有要求都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");
于 2014-11-04T19:30:26.517 回答
1

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

cp -R src dist

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

jsx -x jsx dist dist

并删除 jsx 文件

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

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

于 2014-11-04T19:03:39.470 回答