javascript如何处理jsx [重复]答案

【问题标题】：How does javascript deal with jsx [duplicate]javascript如何处理jsx [重复]
【发布时间】：2019-11-05 11:24:09
【问题描述】：

所以我最近遇到了 jsx，我想知道 jsx 在幕后实际上是如何工作的，javascript 代码是否被预编译以将 jsx 转换为常规 javascript（如果是这样，这将如何工作？）或者 javascript 引擎可以直接编译jsx？

<some>jsx here</some>
<some>jsx here</some>
var = "regular javascript";

edit 我知道 jsx 的作用和用途，我要问的是如何将 jsx 转换为 javascript 代码。还是浏览器会这样做？

如果这个问题离题，请告诉我，以便我删除它，或移至正确的网站。

【问题讨论】：

是的，它是预编译的。通常通过babel 涉及带有webpack 的构建管道。你为什么不下载一些反应示例并检查package.json中的scripts部分
@Thomas 好的，babel 是怎么做到的？它只是将代码转换为 js 的某种类型的正则表达式吗？
不，那要复杂得多。它将您的整个项目（包括 JSX）解析为 AST，对 AST 进行处理并将结果转换为 JS 并将其写入 js 文件
好的，谢谢，这就是我需要知道的全部内容！

【解决方案1】：

实际上 jsx 并没有对你的代码做任何事情。

当您启动 react 应用程序项目时，您应该使用 babel 和 babel 有很多 plugins 和 presets，它们会将您的代码转换为常规的 javascript 代码对于浏览器并检查一下 babeljs.io

之后你可以检查一下 webpackjs

【讨论】：

【解决方案2】：

重复：What does JSX stand for?。但简而言之，它被预编译成纯 JavaScript。

【讨论】：