在前端开发中，我们经常需要将多个 JavaScript 或 CSS 文件合并成一个文件，以减少请求次数、提高页面加载速度。但是，合并后的文件中的行号和列号与原始文件不同，这给调试带来了不便。sourcemap 就是为了解决这个问题而生的。
sourcemap 是一种映射关系，它记录了合并后的文件和原始文件的对应关系。通俗地说，就是在合并文件的同时，为每一行代码添加一段注释，指示它来自于哪个原始文件的哪一行。这样，当出现 bug 时，调试工具就能够根据 sourcemap 将错误指向原始文件的正确位置。
使用 sourcemap 有一定的技巧，我们可以使用 npm 包 broccoli-sourcemap-concat 简化 sourcemap 的生成过程，并且方便的将合并后的文件输出到指定目录。
1. 安装 broccoli-sourcemap-concat
在终端中使用以下命令进行安装：
npm install --save-dev broccoli-sourcemap-concat
2. 在代码中使用 broccoli-sourcemap-concat
在代码中使用 broccoli-sourcemap-concat 的过程包括三个步骤：
- 定义 Broccoli 的根节点。
- 创建一个
SourcemapConcat实例。 - 把根节点通过
SourcemapConcat实例传入后进行输出。
下面将分别介绍这三个步骤。
定义 Broccoli 的根节点
在使用 broccoli-sourcemap-concat 之前，你需要先熟悉一下 Broccoli 的基础概念。在这里简单介绍一下。
Broccoli 是一个将输入的文件夹转换成输出文件夹的构建工具。在 Broccoli 中，一个节点表示一个转换过程，节点的输入是一个或多个文件夹，输出是一个文件夹。每个节点都定义了一个 read 方法，该方法返回传入的文件夹的内容，以及一个 write 方法，该方法将节点的输出写入到磁盘上。
这里以一个简单的例子来说明如何定义 Broccoli 的根节点，假设你要合并两个 JavaScript 文件 a.js 和 b.js，并将它们输出到 dist 文件夹中，你需要编写以下代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------ - --------------------------- ----- ---------- - -------------------------------- -- ---- -------- ------------ ---------- -- ----- ------ - --- ---------------- - -------- - ------- ------ - --- -- ---- ------------ ------------ ---------- -- ----- -------- - ------------ ------ --- -- ---- ---------- ---------- ---------- --------- ----- ------- - --- ------------------ - ---------- --------- --- -- -- --------- --- ------- ------ ----------------展开代码
在上面的代码中，我们通过 Funnel 实例选择了需要合并的 JavaScript 文件 a.js 和 b.js，然后通过 mergeTrees 实例将 Funnel 实例返回的树合并成一个树，在将输出包含在 Broccoli 实例中进行输出。
创建一个 SourcemapConcat 实例
在了解了 Broccoli 的基础概念之后，我们来看一下如何使用 broccoli-sourcemap-concat 进行 JavaScript 文件的合并，并生成 sourcemap。
首先，在代码中引入 SourcemapConcat：
const SourcemapConcat = require('broccoli-sourcemap-concat');
然后，创建一个 SourcemapConcat 实例：
-- -------------------- ---- ------- ----- --------------------- - --- ---------------- ------- -- ---- ---------- ------ - ----------- - ------- ------ -- -- ---- ---------- ----- ----------- --------- -- ---- ---------- ----- ---------------- - -- --------- -- -------- ----- ----------- ------- --------------- ------ - - --展开代码
在上面的代码中，SourcemapConcat 构造函数接收两个参数：要合并的 JavaScript 文件的根节点和配置对象。在配置对象中，我们需要指定我们要合并的 JavaScript 文件和合并后的文件的名称。此外，我们还需要通过 sourceMapConfig 对象指定 sourcemap 的一些配置参数。
把根节点通过 SourcemapConcat 实例传入后进行输出
最后一步是将输出的 JavaScript 文件和 sourcemap 写入磁盘上。同样使用 Broccoli 来处理这一部分：
const jsTreeWithSourcemap = jsConcatWithSourcemap.toTree(); const builderWithSourcemap = new Broccoli(jsTreeWithSourcemap, { outputDir: 'dist/js' }); builderWithSourcemap.build();
在上面的代码中，我们通过 jsConcatWithSourcemap.toTree() 方法获取到合并后的树，然后通过 Broccoli 实例来将输出写入到磁盘上。
示例代码
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ------ - --------------------------- ----- ---------- - -------------------------------- ----- --------------- - ------------------------------------- -- ---- -------- ------------ ---------- -- ----- ------ - --- ---------------- - -------- - ------- ------ - --- -- ---- ----------------- ----------- ---------- --------- --------- -- ------------- ---------------- ----- --------------------- - --- ---------------- ------- - ----------- - ------- ------ -- ----------- --------- ---------------- - -------- ----- ----------- ------- --------------- ------ - - -- -- -- -------------------------------- --------- ----- ------------------- - ------------------------------- -- ---- ---------- ------ --------------------- ------- ----- -------------------- - --- ----------------------------- - ---------- --------- --- -- -- ---------------------- --- ------- ------ -----------------------------展开代码
这样你就可以方便地使用 broccoli-sourcemap-concat 生成 JavaScript 文件的合并文件和 sourcemap，让代码调试更加简单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb572b5cbfe1ea061143a
