如何将多个 JavaScript 文件打包为一个可直接引用的库文件-html教程-PHP中文网

本文介绍使用 esbuild 工具自动化合并多个 js 模块（如 init.js、dom.js、drawing.js）为单个 library.js，实现 html 中只需一条 script 标签即可加载完整功能库，兼顾加载顺序、代码整洁性与生产就绪性。

本文介绍使用 esbuild 工具自动化合并多个 js 模块（如 init.js、dom.js、drawing.js）为单个 library.js，实现 html 中只需一条 script 标签即可加载完整功能库，兼顾加载顺序、代码整洁性与生产就绪性。

在构建自定义前端工具库（类似 p5.js 的模块化设计）时，将功能拆分为多个文件（如 init.js 初始化逻辑、dom.js DOM 操作封装、drawing.js 绘图工具等）是良好实践；但每次新建项目都需在 HTML 中手动按依赖顺序引入全部脚本，不仅冗长易错，还违背“一次构建、多处复用”的工程原则。

推荐方案：使用 ESBuild 进行零配置打包

ESBuild 是一款极速、轻量且开箱即用的 JavaScript 打包器，无需复杂配置即可完成模块合并、依赖解析与自动排序。它能正确处理文件间 import/export 关系（即使你当前用的是传统 IIFE 或全局变量模式，也可通过 inject 方式注入），并支持压缩（minify）、输出路径定制等生产级特性。

✅ 操作步骤如下：

初始化项目并安装 ESBuild

npm init -y
npm install esbuild --save-dev

创建构建脚本 build.js

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

import * as esbuild from 'esbuild';

const esBuildOptions = {
  // 主入口：此处用 stdin 占位，实际通过 inject 注入多个文件
  stdin: { contents: '', resolveDir: '.' },
  bundle: true,
  minify: true,
  // ⚠️ 注意：inject 适用于无 ESM 导入导出的脚本（如全局函数声明）
  // 若你的文件已使用 export/import，请改用 entryPoints + proper exports
  inject: ['./init.js', './dom.js', './drawing.js'],
  outfile: './library.js',
  platform: 'browser',
  target: ['es2020'],
};

try {
  await esbuild.build(esBuildOptions);
  console.log('✅ Library built successfully: library.js');
} catch (err) {
  console.error('❌ Build failed:', err);
  process.exit(1);
}

在 package.json 中添加便捷命令

"scripts": {
  "build": "node build.js",
  "build:watch": "node build.js && esbuild --watch --servedir=."
}

运行 npm run build 即可生成压缩后的 library.js。

? 重要说明与最佳实践：

若各 JS 文件之间存在明确依赖（如 dom.js 需在 init.js 后执行），inject 会严格按数组顺序拼接内容，确保执行时序；
更现代、可维护的方式是将文件改为 ES 模块（例如 export function createElement() {...}），再以 entryPoints: ['./src/index.js'] 作为唯一入口，由 ESBuild 自动分析依赖图——这能避免全局污染，提升类型支持与 Tree-shaking 能力；
生成的 library.js 默认挂载所有导出到全局 window（若未使用模块系统），因此你在 HTML 中可直接调用 setup()、draw() 等函数；
建议将 library.js 提交至版本库时排除源文件夹（如 /src），仅发布构建产物，保持仓库清晰。

最终，在你的 index.html 中仅需一行：