预备秋招浅谈 JSX 转换，babel配置，编译流程。

在秋招面试面试官可能会问你：Babal是什么？它的主要功能是什么？以及它的工作流程等问题。在回答这几个问题前我们需要先来了解一下JXS。

JSX 介绍

JSX它是JS(JavaScript)的一种语法扩展,通常用于React框架中。尽管它看起来很像HTML，但实际上是在JavaScript中嵌入的XML-like语法，简而言之就相当于能在JS里面写html。但是它不能独立运行它需要被转译成纯JavaScript代码（如React.createElement调用）才能被执行，在运行之前依托于vite工程化的工具。

如，在React环境中，你可以这样定义一个简单的组件：

jsx 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

这段代码会被转换为：

javascript 复制代码

function Welcome(props) {
  return React.createElement('h1', null, 'Hello, ', props.name);
}

Babel的定义

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 版本（通常是 ES5），以便在旧版浏览器或环境中运行。

Babel的作用及主要功能

通过Babel，你可以轻松地使用ES6+的新特性（比如Promise、async/await等），甚至是更先进的语法糖（如箭头函数() => {}），并将它们转换为向后兼容的版本（如ES5）。此外，对于React项目而言，Babel还负责将JSX转换为React.createElement调用。

编译流程

为了设置Babel以便处理你的React项目中的JSX和其他新特性，你需要安装一些必要的依赖包。以下是基本步骤：

安装Babel相关工具 使用pnpm或npm安装以下开发依赖：
bash 复制代码
```
pnpm i @babel/cli @babel/core -D
```
其中，
- @babel/cli 是Babel提供的命令行接口。
- @babel/core 是Babel的核心模块。 -D 标志表示这是开发期间所需的依赖，在生产环境中不会被打包进去。
配置转换规则

接下来，你需要定义具体的转换规则。例如，如果你想把React代码转换为iOS平台上的兼容代码或者将ES6+语法降级到ES5，你需要相应的预设或插件。常见的做法是在项目根目录下创建一个.babelrc文件，并添加如下内容：
json 复制代码
```
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```
这里，@babel/preset-env会根据目标环境自动确定需要哪些polyfills，而@babel/preset-react则专门用于处理JSX语法。
执行转码

最后一步就是运行Babel进行实际的代码转换。你可以直接调用Babel CLI命令完成此操作：
bash 复制代码
```
./node_modules/.bin/babel src -d lib
```
这条命令会将src目录下的所有源文件转换并输出到lib目录中。

总结

通过上述的知识，你就能成功搭建起一套基于Babel的工作流，让你可以充分利用现代JavaScript的优势。无论是采用最新的语言特性还是React特有的JSX语法，Babel都为你提供了强大的支持，希望这些带给你有用的地方。