学习esbuild构建工具

简介

既然要学习如何使用esbuild，就说明已经知道，esbuild号称是打开了前端构建工具性能的新时代，最新流行的Vite也是使用esbuild进行了构建依赖。

上图是使用不同的构建工具，构建10个three.js副本的bundle，包括sourcemap和minify压缩等操作，可以看出很明显差距。

主要特点有哪些？

• 不使用缓存进行快速构建
• ES6和CommonJS模块
• ES6模块的Tree Shaking
• JavaScript和Go的API
• 支持TypeScript和JSX语法
• Source maps
• 压缩
• 插件

安装

npm install -g esbuild

查看版本

esbuild --version

你的第一个bundle

1、这里以react示例为例，先安装react相关包

npm install react react-dom

2、创建一个app.jsx文件，用来作为react入口文件

代码里，我们使用的ssr，服务渲染，可以看到console.log输出的就是一段html代码。

import * as React from 'react'
import * as Server from 'react-dom/server'

let Greet = () => <h1>Hello, world!</h1>
console.log(Server.renderToString(<Greet />))

3、最后我们执行构建命令

esbuild app.jsx --bundle --outfile=out.js

 我们可以看到一个out.js的文件构建出来，当我们使用node out.js命令运行看结果的时候，可以看到下面的内容输出来。

<h1 data-reactroot="">Hello, world!</h1>

 构建脚本

上面是使用了简单的命令来进行构建，那么一些复杂的命令可以使用脚本来配合执行。

1、使用package.json配置

{
  "scripts": {
    "build": "esbuild app.jsx --bundle --outfile=out.js"
  }
}

再次执行构建的时候，可以运行 npm run build 命令

2、使用JS脚本执行构建

require('esbuild').build({
  entryPoints: ['app.jsx'],
  bundle: true,
  outfile: 'out.js',
}).catch(() => process.exit(1))

 构建环境配置

1、针对浏览器构建

esbuild的构建环境默认就是针对浏览器的，不需要使用额外的配置参数。但对于一些其他参数，比如 --sourcemap 来源码映射、--minify 来压缩代码。当然，如果你想指定浏览器的版本，可以使用下面的参数。

esbuild app.jsx --bundle --minify --sourcemap --target=chrome58,firefox57,safari11,edge16

2、针对node构建

esbuid也可以针对node环境进行打包，我们可以指定node的版本进行构建。

esbuild app.js --bundle --platform=node --target=node10.4

 当然，我们如果不想将依赖文件都打包在内，我们可以指定 external 参数来忽略某些依赖文件。

esbuild app.jsx --bundle --platform=node --external:./node_modules/*