esbuild入门教程

admin · 发表于 2022-1-21 20:26:22

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 脚本
[mw_shl_code=applescript,true]"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"
}[/mw_shl_code]

运行 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 文件
[mw_shl_code=applescript,true]<!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>[/mw_shl_code]
最后直接浏览器打开 index.html 文件即可查看到效果

总结
esbuild 作为一款新的构建工具，可以打包构建 React，Vue，TypeScript 项目，但是目前社区还不够完善，不过随着 esbuild 社区的发展，会有更多的功能支持，也坚信会成为一款优秀的构建工具，以后也可以应用到生产中。

		自动登录	找回密码
密码			立即注册