结合React上手esbuild（新手适用）-一一网

我们都知道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也是一个不错的选择。

文章版权归作者所有，未经允许请勿转载。

THE END

前端