Reactjs 什么可以'；我从NPM包导出JSX

我正在编写一个库，它公开一些React组件作为其API的一部分

我将在这里做一些假设：

1-它将在react项目中使用

2-这些项目将在某个时候捆绑它们的依赖关系

3-那些react项目可以使用JSX作为描述UI的一种方式

4-他们选择的捆绑程序Webpack（如果是CreateReact应用程序的话）将使用babel来解析JSX并将其转换为vanilla JS

按照这个逻辑，我应该能够从外部软件包导出一些JSX，因为软件包的代码将与应用程序捆绑、传输

但是，当我在create react应用程序项目中执行此操作时，会出现以下错误：

---

SyntaxError:/Users/someone/Desktop/someproject/dist/esm/index.js：当前未启用对实验语法“jsx”的支持（35:13）：

将@babel/preset react（）添加到babel配置的“预设”部分以启用转换。 如果您想保持原样，请将@babel/plugin语法jsx（）添加到“plugins”部分以启用解析

---

是的，我可以传输JSX，也许我会。我只是不认为有任何理由，如果它将被捆绑。我更喜欢将传输调整和优化留给用户

我担心的是，如果我自己传输它，我有两个选择

在范围内导入React，并使用babel将

转换为

React.createElement（）

，但这将排除使用

我自己使用新的JSX转换，并确定我的代码是否与17之前的react版本兼容。增加我自己的包大小，因为babel添加了很多代码来实现这一点

在这一点上，我想我对这个问题感到非常兴奋，因为坦率地说，我不知道为什么我不能从我的包中导出简单的JSX。我知道我可能遗漏了一些明显的东西，比如分号或其他什么，但我真的想理解

如果您需要一些代码/汇总-babel配置，请随时询问

---

坦克

乍一看，你的逻辑似乎有道理。但让我们来看看为什么这是个坏主意

JSX是一种特殊的语法，必须传输到浏览器中要理解的最低通用解释器，或。这就是bundler所做的，正如您所提到的，任何在节点环境中使用react的人几乎都肯定会使用bundler来完成这项工作

然而，人们可以在代码中使用任意数量的wierd语法。当bundler从node_模块导入代码时，如果这些模块中的代码尚未传输，bundler也需要传输它们。考虑到未传输的模块可能具有任意数量的奇怪语法，每个模块都需要自己的传输指令（想想巴贝尔配置）。为每个节点(u)模块提供唯一的传输配置将非常笨拙,更不用说必须以可能不同的方式传输每个节点(u)模块,这将对性能不利

解决这个问题的普遍接受的最佳实践是使用一个bunder来简单地构建包，该bunder将代码归结为最低公分母。这使包用户的绑定器能够“按原样”将代码引入节点_模块中

虽然可能会想出一些疯狂的babe/webpack/rollup指令来自定义将模块解释为JSX，但您真的希望库用户必须这样做吗？特别是在使用create react应用程序的情况下，定制CRA的babel配置本机不受支持，这意味着他们需要采取措施才能使您的库正常工作。此外，出于明显的性能原因，webpack默认从js传输中排除节点_模块，CRA遵循此约定。在发布库时，您希望它们能够普遍使用，并尽可能易于使用

---

传输、调整和优化代码最好由编写代码的人来完成，如果您试图发布react组件库，那么编写代码的人就是您。

谢谢您的回答！现在这更有意义了。我仍然没有得到“…未传输的模块可能有很多奇怪的语法”部分，我认为JSX是标准的。但我得到了一般的想法：我不能发送原始代码并期望用户只处理它。一个外部包应该是一个解决方案，而不是更多的工作来让它工作。是的，从react的角度来看，JSX是一个标准。但从node/npm的角度来看，它绝对不是一个标准，就像Handlebar语法一样（这需要它自己的语法，或者Vuejs语法，甚至是TypeScript语法。虽然这些都是它们自己世界中的标准，但它们的标准化方式并不是nodejs或浏览器在没有帮助的情况下可以理解的，因此我们使用Transpiler和构建工具将它们归结为一个普遍理解的标准。