Babelify 没有在 node_modules 中转译 jsx 代码答案

【问题标题】：Babelify isn't transpiling jsx code in node_modulesBabelify 没有在 node_modules 中转译 jsx 代码
【发布时间】：2017-02-27 17:07:54
【问题描述】：

我已成功配置 Babelify 将 jsx 代码转换为 js，并且我过去制作了 node_modules，因此我可以在没有特定文件位置的情况下链接它们，只需包名。但是当我在我的 node_module 代码中包含 jsx 代码时，babelify 会在我尝试使用 html 标记样式数据的地方报告意外的标记。我正在制作自己的 react-bootstrap 版本以更好地满足我的需求。我查看了 react-bootstrap 做了什么，他们甚至没有使用 jsx，他们使用 React.createElement 调用。在节点模块中使用jsx是不可能的吗？这将是一个奇怪的限制。

我的目标是能够在不指定特定文件路径的情况下“要求”我编写的模块，而只需指定包名。当我在 node_module 文件之外工作时，我的代码会编译。

我的 package.json 文件：

{
  "name": "react-bootstrap",
  "version": "1.0.0",
  "main": "index.jsx"
}

当我只在 'require' 中指定包名时，Babelify 只在 node_module 文件中查找，如果有 package.json 命令也可以在其他文件夹中查找，类似的东西可能会解决我的问题。除非那也只编译 js 而不是 jsx。

谢谢！

【问题讨论】：

标签： javascript reactjs npm node-modules jsx

【解决方案1】：

我找到了解决方案。每个需要进行 babelify 的模块都需要在其 package.json 中指定 babelify 转换。

编译时使用命令：

watchify src/main.jsx -v -t [ babelify --preset [ react ] ] -o public/js/index.js

因为我在命令中设置了 babelify react 预设，所以我认为它可以在任何地方工作。我发现我可以使用：

watchify src/main.jsx -v -t -o public/js/index.js

如果我添加：

  "browserify": {
    "transform": [["babelify", { "presets": ["react"] }]]
  },

到我的 package.json。所以我只是将上面的命令添加到我的 react-bootstrap package.json 中。

【讨论】：