本文介绍使用 esbuild 工具自动化合并多个 js 模块（如 init.js、dom.js、drawing.js）为单个 library.js，实现 html 中仅需一行引用，兼顾加载顺序、代码可维护性与构建效率。
本文介绍使用 esbuild 工具自动化合并多个 js 模块（如 init.js、dom.js、drawing.js）为单个 library.js，实现 html 中仅需一行引用，兼顾加载顺序、代码可维护性与构建效率。
在开发自定义前端库（类似 p5.js 的轻量级工具集）时，将功能拆分为多个模块（如 init.js 负责初始化、dom.js 封装 DOM 操作、drawing.js 提供绘图方法）是良好的工程实践。但每次新建项目都需在 HTML 中手动按依赖顺序引入十余个 <script> 标签，不仅冗长易错，也违背“一次构建、多处复用”的原则。
推荐方案：使用 ESBuild 进行零配置打包
ESBuild 是目前速度最快、生态成熟的现代 JavaScript 打包器之一，无需复杂配置即可完成模块合并、顺序控制、语法转换与压缩。
✅ 步骤如下：
立即学习“Java免费学习笔记（深入）”；
-
安装 ESBuild（作为本地开发依赖）
npm init -y npm install esbuild --save-dev
创建构建脚本 build.js
注意：ESBuild 的 inject 选项适用于注入全局变量或 polyfill，但不适用于直接拼接多个入口文件。更准确、可靠的方式是指定一个主入口文件（如 index.js），并在其中显式导入所有模块，确保执行顺序与依赖关系被正确解析：
// index.js —— 唯一入口，控制加载顺序 import './init.js'; import './dom.js'; import './drawing.js'; // 可继续添加其他模块……
然后编写构建脚本：
// build.js
import * as esbuild from 'esbuild';
await esbuild.build({
entryPoints: ['index.js'], // ✅ 正确入口：由 import 语句声明依赖顺序
bundle: true, // 启用模块打包
minify: true, // 自动压缩输出
format: 'iife', // 生成自执行函数，避免污染全局作用域
target: ['es2020'], // 兼容主流浏览器
outfile: 'library.js', // 输出文件名
sourcemap: true, // 可选：生成 source map 便于调试
});-
运行构建
node build.js
执行后，library.js 即包含全部代码，且严格遵循 index.js 中 import 的顺序执行——这比手动拼接字符串或滥用 inject 更安全、可维护。
? 重要注意事项：
- 所有源文件应使用 ES Module 语法（export / import），避免 var 声明的全局污染；
- 若某些文件依赖全局变量（如 window 或第三方库），需通过 define 或 external 配置处理；
- 构建后建议在 HTML 中通过 <script src="library.js"></script> 引入，并移除所有旧的 <script> 标签；
- 可将构建命令写入 package.json：
"scripts": { "build": "node build.js" }之后只需运行 npm run build 即可更新库文件。
? 进阶提示：如需支持浏览器直接运行（无构建环境），可搭配 --watch 实现热重载，或使用 esbuild --servedir=. 快速预览。
至此，你便拥有了一个可一键更新、结构清晰、开箱即用的前端工具库——告别混乱的 script 标签，拥抱模块化构建工作流。
