为何javascript是脚本语言，还需要编译器呢？

因为jsx和typescript并不被浏览器或者v8引擎所支持，所以需要编译器将它们编译成javscript。

JSX

JSX（JavaScript Syntax Extension）并不是一种在浏览器中直接执行的语言或语法，它实际上是 JavaScript 的一种语法糖。

JSX 文件中的代码最终会被编译成纯 JavaScript 代码，这个过程通常由工具如 Babel 完成。

Babel 是一个广泛使用的 JavaScript 编译器，它可以将新的 JavaScript 语法特性转换为向后兼容的旧版本代码，包括 JSX 到 JavaScript 的转换。

例如，一段JSX代码：

1

const element = <h1>Hello, world!</h1>;

通过Bable编译之后，可能会变成如下所示的 JavaScript 代码：

1

const element = React.createElement("h1", null, "Hello, world!");

这里 React.createElement 函数调用创建了一个 React 元素，这是一种轻量级的对象，描述了你想要在屏幕上看到的内容。React 会根据这些元素高效地更新 DOM。

JSX 的灵活性在于它可以被设计成编译成多种不同的输出形式，不仅仅局限于 React 的 createElement 调用。开发者可以根据需要配置 Babel 插件或其他编译工具，以生成适用于不同框架或库的代码。这使得 JSX 成为了一个非常通用和可移植的模板语法。

编译JSX除了Babel，还有其他工具么

1. TypeScript：

TypeScript 是 JavaScript 的一个超集，增加了静态类型检查。

它自带对 JSX 的支持，因此如果你使用 TypeScript 编写 React 应用，就不需要额外配置 Babel 来处理 JSX。

想要在TypeScript中使用JSX，必须做两件事：给文件一个.tsx扩展名； 启用jsx选项。

TypeScript具有三种JSX模式：preserve，react和react-native。这些模式只在代码生成阶段起作用，类型检查并不受影响。

在preserve模式下生成的代码中会保留JSX以供后续的转换操作使用，例如Babel，输出文件的扩展名为.jsx。

react-native模式相当于preserve，但是输出文件的扩展名为.jsx。

react模式会生成React.createElement代码，输出文件的扩展名为.js。

可以通过命令行参数--jsx或者tsconfig.json里的选项来指定模式。

2. Webpack + [ babel-loader / esbuild-loader ]：

Webpack 是一个流行的模块捆绑工具，常用于复杂的前端应用程序构建。

通过 babel-loader 或者 esbuild-loader 可以让 Webpack 处理 JSX 文件，当然也可以寻找其他特定于 JSX 的加载器。

上一篇 « 下一篇 »