学习esbuild构建工具

最新推荐文章于 2025-03-07 18:27:12 发布

⑥②

最新推荐文章于 2025-03-07 18:27:12 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 自学笔记文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/lw001x/article/details/124115700

版权

自学笔记同时被 2 个专栏收录

26 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

本文探讨esbuild的特点，如快速构建、模块支持、Tree Shaking、多平台兼容及配置选项，带你了解如何利用esbuild高效构建React应用并配置复杂脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

既然要学习如何使用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/*