esbuild入门教程
esbuild 作为一款新的构建工具，构建打包速度几乎完全碾压市面上流行的 webpack5，rollup 等工具。目前国内流行的 Vite 也使用了 esbuild 来预构建依赖，官方宣称速度快了 10 - 100 倍。esbulid 为什么这么快呢？
esbuild 是用 Go 语言编写的，可以编译为本地代码，执行速度比 Js 要快很多，并且自带多线程，可以更好的利用 CPU。我们不深度调研，反正记住，esbuild 很快就对了。
本文主要是来尝试体验下 esbuild，顺便做了下记录。
安装 esbuild
esbuild 安装起来也很简单，只需要通过 npm 来全局安装即可
npm install -g esbuild
使用 esbuild 来构建 React 应用
首先通过 CRA 创建 React 应用，在 package.json 的 script 标签添加 esbuild 脚本
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"esbuild": "esbuild src/index.js --bundle --minify --outfile=public/bundle.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
运行 npm run esbuild 后发现报错 The JSX syntax extension is not currently enabled，原来是要加入在 esbuild 新增 loader 选项，我们重新修改命令，再运行构建脚本，结果如下
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"esbuild": "esbuild src/index.js --bundle --minify --loader:.js=jsx --loader:.svg=dataurl --outfile=public/bundle.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
esbuild 的参数说明
bundle 配置所有的文件打包成一个文件
minify 配置是否压缩打包后的文件
loader 配置用来解析文件的 loader，类似于 webpack loader 的功能，这里通过命令来声明，这里用到的 loader 有
loader:.js=jsx 配置用来识别 jsx 语法
loader:.svg=dataurl 配置用来将 svg 文件转为 base64
构建成功后，我们会在 public 文件夹看到 bundle.css 和 bundle.js 两个文件，由于我们只是打包 jsx 文件，而没有把构建后的 js 和 css 注入到 html，接下来我们修改 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link href="./bundle.css" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./bundle.js"></script>
</body>
</html>
最后直接浏览器打开 index.html 文件即可查看到效果
总结
esbuild 作为一款新的构建工具，可以打包构建 React，Vue，TypeScript 项目，但是目前社区还不够完善，不过随着 esbuild 社区的发展，会有更多的功能支持，也坚信会成为一款优秀的构建工具，以后也可以应用到生产中。
页:
[1]