我们都知道react有一个官方的脚手架create-react-app，一条命令就可以让你使用react编写代码，但是在这个脚手架中react代码的打包过程对我们是完全隐藏的。
对于一个新手来说，比如我刚接触到这个工具的时候是充满了疑惑的，为什么我不能npm install react react-dom然后直接使用script标签引入呢？为什么这些代码要打包才可以使用？打包很复杂吗？怎么进行打包呢？
上面这些问题我们暂且不做回答，下面直接使用esbuild这个打包工具，带大家从零开始制作一个简单的react页面。
esbuild是一个比较新的打包工具，这里是它的 官方文档，相较于create-react-app使用的webpack而言，它的优点是快，缺点是不支持css module等特性。当然了，如果你一定要使用css module的话，那么很抱歉这篇文章不能帮助到你
开始动手
1. 初始化
确定你已经安装好了 node和 npm，然后打开电脑的命令行，新建一个文件夹，并运行npm init -y
2. 安装依赖
安装需要用到的依赖，我们会用到react react-dom esbuild这三个包
3. 新建文件
打开你的 vs code或者其他编辑器，新建一个html文件，以及一个src文件夹（包含一个css文件和一个jsx文件）
4. 写代码
在你的jsx和css中随便写点什么
import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
const root = document.createElement('div');
root.className = 'root';
document.body.appendChild(root);
const App = () => {
return (
<div>
<h1 className='esbuild'>Hello, Esbuild!</h1>
<h1 className='react'>Hello, React!</h1>
</div>
);
};
ReactDOM.render(
<App />,
root,
);
.esbuild {
color: rgb(247, 209, 71);
}
.react {
color: rgb(97, 218, 251);
}
5. 进行打包
在你的package.json文件的script标签中加入"build": "esbuild src/app.jsx --outfile=build/index.js --bundle"，这代表以src文件夹中的app.jsx为入口，build文件夹的index.js为输出进行打包。
然后在终端中输入npm run build命令
现在你的目录下面多出了一个build文件夹和两个文件
6. 查看效果
这时我们打开之前新建的html文件，将其初始化然后将build文件夹中的两个文件链接上去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./build/index.css">
<title>Esbuild and React</title>
</head>
<body>
<script src="./build/index.js"></script>
</body>
</html>
然后可以使用vs code中的live server打开或者直接通过浏览器打开，页面就可以正常显示了
7. 完善功能
仅有这些的话，对于开发而言还远远不够，如何达到原生js开发时的实时更改的效果呢，我们可以在package.json中之前build命令后面加一个--watch或者增加一个watch命令 "watch": "esbuild src/app.jsx --outfile=build/index.js --bundle --watch"然后借助vs code的live server插件就可以实现实时的效果了。
总结
本文结合react对esbuid这个打包工具进行了简单使用，最后一步实现方法并不是唯一的，还可以使用esbuild的serve功能实现，大家可以阅读 官方文档探索。
本文写作的初衷是为初学者推荐一款合适的打包工具，在我看来，webpack这个工具非常的臃肿，尽管它功能非常丰富，但是初学之时并不是很友好，esbuild除了打包速度飞快，对于ts文件的处理也是非常友好，不需要设置各种loader，配置简单，是一个非常“轻”的选择。 除此之外，vite也是一个不错的选择。
