在服务器或浏览器上将 JSX 转换为 JS？

Posted 2023-03-24

【中文标题】在服务器或浏览器上将 JSX 转换为 JS？

【英文标题】：Transpile JSX to JS on server or browser?

【发布时间】：2020-01-21 06:29:18

【问题描述】：

对 JSX 来说非常新，但阅读它似乎服务器端和客户端（在浏览器中）转换都是可能的选择。

JSX 是否旨在发送到客户端并通常在浏览器中进行转译。这是否意味着现代版本的 Chrome、Firefox、Opera 等都理解 JSX 语法？

还是服务器端转译更普遍？您是否只希望在开发期间进行客户端转译，例如出于某种原因避免安装 npm？

【问题讨论】：

你已经标记了这个jsx，它是在 React 中使用的the html-like syntax for generating DOM，但是你链接到this research project which seems to have been dead for almost half a decade。你到底在问哪个？

虽然 jsx 的编译不是特别慢，但它并不快。我的项目编译大约需要 45 秒。浏览器编译器用于调试您的应用程序，考虑到服务器端工作流与 Visual Studio Code 等更好地集成，这些天并没有真正用于大多数 React 项目。

我对研究项目不感兴趣，请阅读我的帖子。我要指出的是，它是 JSX 的高搜索引擎结果，反映了 JSX 是否通常被转换为服务器端/客户端的混淆。

@JSStuball — 如果您不是在询问那个研究项目，为什么要把它放在问题中。这是一个完整的红鲱鱼。

我现在已经删除了。

【参考方案1】：

JSX 是否旨在发送到客户端并通常在浏览器中进行转译。

没有。

这是否意味着现代版本的 Chrome、Firefox、Opera 等都理解 JSX 语法？

没有。

见the introduction to React:

在您的项目中尝试 JSX 的最快方法是将此标签添加到您的页面：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在您可以在任何<script> 标签中使用 JSX，方法是向其添加 type="text/babel" 属性。这是一个带有 JSX 的示例 HTML 文件，您可以下载并使用它。

这需要您提供一个转译器（用 JS 编写）。

还是服务器端转译更普遍？您是否只希望在开发期间进行客户端转译，例如出于某种原因避免安装 npm？

再次，请参阅上面的链接：

这种方法非常适合学习和创建简单的演示。但是，它会使您的网站变慢并且不适合生产。当您准备好继续前进时，删除这个新的 <script> 标签和您添加的 type="text/babel" 属性。相反，在下一节中，您将设置一个 JSX 预处理器来自动转换所有 <script> 标签。

---

浏览器端转译只适用于“学习和创建简单的demo”。

【参考方案2】：

来自您的链接：“JSX 在将源代码编译为 javascript 时执行优化。生成的代码比直接用 JavaScript 编写的等效代码运行得更快。”他们关于“设计为在现代 Web 浏览器上运行”的另一种说法可以说是具有误导性的——它们并不意味着浏览器可以直接运行它而无需转译——JSX 代码仍然需要转译成纯 Javascript，然后浏览器才能使用它。