在前端领域无论是哪种语言最基础的是javascript，所以我们一般定义的文件都是js文件，但是React是jsx文件，JSX 是一种 JavaScript 语法扩展，主要用于 React 库中描述组件的结构。那么我们实现mini-react的过程中肯定有一个过程，就是如何让我们的程序在编译的时候识别jsx语法？
那么需要借助构建工具，这里介绍两种：
Webpack识别jsx原理：
Webpack是一个前端构建工具，它本身并不具备识别JSX的能力。但Webpack可以通过加载器（Loaders）来处理JSX。以下是实现原理：
- 配置加载器：在Webpack的配置文件中，你可以添加一个名为
jsx-loader的加载器，用于处理JSX文件。这个加载器会将JSX代码转换为普通的JavaScript代码。 - 转换JSX：
jsx-loader会将JSX代码转换为JavaScript代码，这个过程通常包括以下步骤：
- 解析JSX代码：
jsx-loader首先会解析JSX代码，将其转换为一个抽象语法树（AST）。 - 转换AST：然后，
jsx-loader会将AST转换为JavaScript代码。这个过程中，JSX中的标签会被转换为React.createElement()函数调用。 - 输出JavaScript代码：最后，
jsx-loader会将转换后的JavaScript代码输出。
- 使用Babel：如果你使用的是Babel，那么你可以使用
babel-loader来代替jsx-loader。babel-loader是一个更通用的加载器，它可以处理JSX，以及其他的JavaScript语法扩展。 - 示例配置：下面是一个使用Babel来配置Webpack处理JSX的示例：
module.exports = {
module: {
rules: [
{
test: /.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
},
],
},
};
在这个示例中，我们使用了babel-loader来处理.js和.jsx文件。我们还使用了@babel/preset-react预设，它可以处理JSX语法。
Vite识别jsx原理：
Vite 是一个构建工具，它使用 ES Modules 导入和导出来解析和打包代码。Vite 并不直接识别 JSX，它依赖于 Babel 来处理 JSX。
实现原理如下：
- Vite 在解析文件时，如果发现文件扩展名为
.jsx或包含jsx语法，就会将文件视为 JSX 文件。 - Vite 会使用 Babel 来处理 JSX 文件。Babel 是一个 JavaScript 编译器，它可以将 ES6+ 代码转换为 ES5 代码，以便在旧版浏览器上运行。Babel 也可以处理 JSX，将其转换为 JavaScript。
- Babel 处理 JSX 时，会使用
@babel/plugin-transform-react-jsx插件。这个插件可以将 JSX 转换为 JavaScript，同时支持 React 的 JSX 语法。 - Babel 将 JSX 转换为 JavaScript 后，Vite 会继续处理转换后的 JavaScript 代码，进行打包、压缩等操作。
总之，Vite 通过使用 Babel 来处理 JSX，实现对 JSX 的支持。
