当我们需要将多个前端模块打包成一个文件以减少网络请求时，我们会使用前端模块化工具如 webpack 或者 rollup。然而这些工具可能会产生一些不必要的开销，因为它们需要将所有模块加载到内存中，并维护一个模块的依赖图。在我们利用浏览器原生的 ES 模块系统并使用浏览器端打包工具时，就可能会有不必要的开销和冗余。
browser-module-concat 是一个 npm 包，它专门针对浏览器环境下的模块化开发需求，提供了一个轻量级的、零配置的解决方案，支持将多个模块打包为一个文件并按需加载。本文将详细介绍该 npm 包的使用教程。
安装
使用 npm 安装：
npm install browser-module-concat
使用 yarn 安装：
yarn add browser-module-concat
使用
browserify
browserify 是一款适用于浏览器的模块化打包工具，我们可以使用 browser-module-concat 来实现将多个模块打包为一个文件。
首先在项目中安装 browserify 和 browser-module-concat：
npm install browserify browser-module-concat
或者使用 yarn：
yarn add browserify browser-module-concat
然后在项目根目录下创建一个名为 build.js 的文件，添加以下代码：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------------------- - --------------------------------- ----- ---- - ------------------ ----- ------- - ------------------- ---------------------------- - --------- ----- ----------- ---- ---------- -- - ------------------ ---------- ---
其中，entries 表示包含入口模块文件的数组。这里假设我们的入口模块文件为 "./src/index.js"。commonJs 表示是否需要将 CommonJS 模块转换为 ES 模块，输出的 dest 表示生成的文件路径。
执行以下命令进行打包：
npx browserify build.js
执行完毕后，我们可以在项目根目录的 build/bundle.js 文件中找到打包后的代码。
esbuild
esbuild 是一款非常快的 JavaScript 打包器，支持将多个模块打包为一个文件，并生成受 ES6 模块支持的代码。我们可以使用 browser-module-concat 来实现将多个模块打包为一个文件。
首先在项目中安装 esbuild 和 browser-module-concat：
npm install esbuild browser-module-concat
或者使用 yarn：
yarn add esbuild browser-module-concat
然后在项目根目录下创建一个名为 build.js 的文件，添加以下代码：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------------------- - --------------------------------- ----- ------- - ------------------- ----- ---- - ------------------ ----- ------- - ------------------- ---------------------------- --------------------------- -- - ----- - ---- - - --------------------------------------- - ------- ---- --- ---------------------- ------ ------------------ ---------- ---
其中，entries 表示包含入口模块文件的数组。这里假设我们的入口模块文件为 "./src/index.js"，意味着 ./src/index.js 以及其所有的依赖将会被合并成为一个文件。concatenatedCode 表示合并后的代码。
执行以下命令进行打包：
node build.js
执行完毕后，我们可以在项目根目录的 build/bundle.js 文件中找到打包后的代码。
示例代码
假设我们有两个 JS 文件，分别为 utils.js 和 main.js，分别位于 src 目录下，并且 main.js 依赖了 utils.js 中的内容。
utils.js 中的内容如下：
export const sum = (a, b) => a + b; export const multiply = (a, b) => a * b;
main.js 中的内容如下：
import { sum } from "./utils.js";
const a = 1;
const b = 2;
console.log(sum(a, b));然后我们使用 browser-module-concat 将这两个文件打包为一个文件。
browserify 示例代码：
-- -------------------- ---- ------- ----- -- - -------------- ----- ------------------- - --------------------------------- ----- ---- - ------------------ ----- ------- - ------------------ ---------------------------- - --------- ---- -------------------------- -- - ---------------------- ------------------ ------------------ ---------- ---
执行以下命令进行打包：
npx browserify build.js
执行完毕后，我们可以在项目根目录的 build/bundle.js 文件中找到打包后的代码：
-- -------------------- ---- ------- -- ------------- -- ------------------ - ----- --------------- - ---- -- --- ------ - ---------------------- --- - - -- --- - - -- --------------- -------------- ---- --- -------- - - ---- ----------- --------- --------------- -- --------------- - ---------
我们发现，utils.js 中定义的两个函数分别被插入到了 build/bundle.js 中。对于 main.js 中引用的 sum 函数，我们使用导入兼容模式，将其打包到了生成的文件中。
esbuild 示例代码：
-- -------------------- ---- -------
----- -- - --------------
----- ------------------- - ---------------------------------
----- ------- - -------------------
----- ---- - ------------------
----- ------- - ------------------
---------------------------- -------------- ------------------ -- -
----- - ---- - - ----- ----------------------------------- -
------- -----
------- ------
---
---------------------- ------
------------------ ----------
---执行以下命令进行打包：
node build.js
执行完毕后，我们可以在项目根目录的 build/bundle.js 文件中找到打包后的代码：
import { a as a$1, b as b$1 } from "./utils.js";
console.log(a) ; var a = 1;
console.log((a,b) => a + b)(a$1, b$1);我们发现，utils.js 和 main.js 所有的内容都被打包成一个文件，而无任何模块化代码。在生成的代码中，我们看到浏览器原生的 import 语句的影响依然存在，因此并不会影响项目的运行效果。
总结
在使用前端模块化工具时，我们有时会遇到一些需要额外开销的情况，例如将所有模块加载到内存中，并维护一个模块的依赖图。browser-module-concat 正是针对此类情况而设计的，它为我们提供了一个轻量级的、零配置的解决方案，支持将多个模块打包为一个文件并按需加载，并且支持 browserify 和 esbuild 两种打包方式。通过学习本文，我们可以更好地掌握和使用 browser-module-concat，提升我们的开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5176