esbuild on 编程那些事儿

第1章 esbuild是什么

Sat, 28 Mar 2026 11:54:00 +0800

Chapter 01 - esbuild 是什么

1.1 定义：一句话认识 esbuild

想象一下这个场景：你手搓了一个炫酷的网页，代码模块写得优雅又整洁，结果浏览器打开一看——满屏报错，理由是它"不认识"你的 import 和 export。

第2章历史与演进

Sat, 28 Mar 2026 11:54:00 +0800

2.1 诞生背景：传统构建工具的速度瓶颈

话说前端圈子的构建工具发展史，就是一部"蜗牛进化史"。

2010 年代初期，前端项目还很单纯——写几个 HTML、几个 CSS、几个 JS 文件，用手直接在 <script> 标签里写代码，搞定了。那时候的"构建工具"基本等于一个 FTP 上传工具，把文件拖进服务器就完事了。

第3章 esbuild能做什么

Sat, 28 Mar 2026 11:54:00 +0800

3.1 打包（Bundling）

3.1.1 多模块合并为单文件

想象一下你写了一个网页，有 50 个 .js 文件，每个文件负责不同的功能——有的是处理表单验证的，有的是负责动画效果的，有的是处理网络请求的。

第4章 esbuild用在哪里

Sat, 28 Mar 2026 11:54:00 +0800

4.1 前端项目构建

4.1.1 单页面应用（SPA）

单页面应用（Single Page Application，简称 SPA）是这些年最流行的前端架构之一。

它的特点是：整个应用只有一个 HTML 页面，后续的页面切换不需要从服务器加载新页面，而是通过 JavaScript 动态渲染不同的"视图"（View）。用户感觉页面在切换，实际上整个页面从来没刷新过——这就像看电视剧不换台，而是让演员在同一个舞台上换布景。

第5章如何使用esbuild

Sat, 28 Mar 2026 11:54:00 +0800

5.1 环境安装

5.1.1 Node.js 环境要求（版本支持说明）

在安装 esbuild 之前，你需要确保系统里已经安装了 Node.js。

Node.js 是一个 JavaScript 运行时，简单理解就是：它让你能在服务器端、桌面端、命令行里运行 JavaScript 代码。esbuild 的 JavaScript 版本需要 Node.js 才能运行（也有不需要 Node.js 的原生二进制版本，后面会讲）。

第6章注意事项与陷阱

Sat, 28 Mar 2026 11:54:00 +0800

6.1 已知局限性

esbuild 很快，但这不意味着它什么都能干。在决定用 esbuild 之前，你需要了解它的局限性。

6.1.1 无内置 HMR（热模块替换），依赖上层工具实现

HMR（Hot Module Replacement，热模块替换）是前端开发中的"神器"——当你的代码发生变化时，不需要刷新整个页面，就能把变化的部分替换进去，页面的其他状态（比如输入框里的内容、滚动位置、API 请求的状态）都能保持不变。

第7章配置参考

Sat, 28 Mar 2026 11:54:00 +0800

7.1 入口与出口配置

7.1.1 entryPoints（入口文件 / 多个入口）

entryPoints 是 esbuild 构建的起点，可以是单个文件，也可以是多个文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 单个入口
await esbuild.build({
 entryPoints: ['src/index.js'],
 outfile: 'dist/index.js',
});

// 多个入口 —— 每个入口会生成对应的输出文件
await esbuild.build({
 entryPoints: ['src/home.js', 'src/about.js', 'src/contact.js'],
 outdir: 'dist',
});
// 生成：dist/home.js、dist/about.js、dist/contact.js

7.1.2 stdin（从标准输入读取代码，适用于特殊构建场景）

stdin 配置让你不需要文件，直接从命令行或管道输入代码：

第8章附录

Sat, 28 Mar 2026 11:54:00 +0800

8.1 官方资源链接（GitHub / 文档 / changelog）

学习任何工具，官方文档永远是最权威的资料。以下是 esbuild 的官方资源：

资源	链接
GitHub 仓库	github.com/evanw/esbuild
官方文档	esbuild.github.io
官方博客	esbuild.github.io/news
Changelog	github.com/evanw/esbuild/releases
npm 页面	www.npmjs.com/package/esbuild

GitHub 仓库

esbuild 的 GitHub 仓库（github.com/evanw/esbuild）是获取信息的第一站。

esbuild on 编程那些事儿

第1章 esbuild是什么

Chapter 01 - esbuild 是什么

1.1 定义：一句话认识 esbuild

第2章 历史与演进

2.1 诞生背景：传统构建工具的速度瓶颈

第3章 esbuild能做什么

3.1 打包（Bundling）

3.1.1 多模块合并为单文件

第4章 esbuild用在哪里

4.1 前端项目构建

4.1.1 单页面应用（SPA）

第5章 如何使用esbuild

5.1 环境安装

5.1.1 Node.js 环境要求（版本支持说明）

第6章 注意事项与陷阱

6.1 已知局限性

6.1.1 无内置 HMR（热模块替换），依赖上层工具实现

第7章 配置参考

7.1 入口与出口配置

7.1.1 entryPoints（入口文件 / 多个入口）

7.1.2 stdin（从标准输入读取代码，适用于特殊构建场景）

第8章 附录

8.1 官方资源链接（GitHub / 文档 / changelog）

GitHub 仓库

第2章历史与演进

第5章如何使用esbuild

第6章注意事项与陷阱

第7章配置参考

第8章附录