在前端开发中，为了加快页面加载速度，我们通常会将多个 js 文件合并成一个，以减少页面发起 http 请求的次数，从而提升页面加载速度。同时，合并 js 文件也可以减小项目的体积，便于构建和部署。
broccoli-concat-source-map 是一个 npm 包，用于将多个 js 文件合并成一个文件，并生成 source map，以便于调试。下面是使用教程。
安装
首先，我们需要在项目中安装 broccoli-concat-source-map：
npm install --save-dev broccoli-concat-source-map
使用
在项目的 Brocfile.js 文件中，引入 broccoli-concat-source-map：
const concat = require('broccoli-concat-source-map');接着，使用 concat() 方法将多个 js 文件合并成一个。concat() 方法需要两个参数：第一个参数是一个数组，表示需要合并的文件的路径；第二个参数是一个对象，包含配置信息。
示例代码：
-- -------------------- ---- ------- ----- ------- - - -------------- -------------- ------------- -- ----- ------- - - ----------- -------- ----------- ----------------- -- ----- -------- - ----------------- ---------
上面的代码将 js/file1.js、js/file2.js、js/file3.js 这三个文件合并成一个文件，输出到 dist/bundle.js 中。
当我们执行 broccoli build 命令时，会在 dist 目录下生成一个 bundle.js 文件。
配置项
在第二个参数中，可以配置一些选项，以满足我们的需求。
inputFiles
inputFiles 表示需要合并的文件的路径。
示例代码：
const jsFiles = [ 'js/file1.js', 'js/file2.js', 'js/file3.js' ];
outputFile
outputFile 表示合并后的文件的输出路径。
示例代码：
const options = {
inputFiles: jsFiles,
outputFile: '/dist/bundle.js'
};separator
separator 表示合并后的文件中，多个文件之间的分隔符，默认为 \n。
示例代码：
const options = {
inputFiles: jsFiles,
outputFile: '/dist/bundle.js',
separator: ';'
};sourceMapConfig
sourceMapConfig 表示 source map 的配置信息。
示例代码：
-- -------------------- ---- -------
----- ------- - -
----------- --------
----------- ------------------
---------- ----
---------------- -
-------- -----
----------- -------
--------------- ---------
------------------ ----
-
--上面的代码表示，生成 source map，并将其嵌入到输出文件（使用行内的方式）。同时，source map 将会为所有 js 文件生成一个 map 文件。
结语
通过本文的学习，我们了解了如何使用 broccoli-concat-source-map 这个 npm 包将多个 js 文件合并成一个，并生成 source map 以便于调试。希望可以对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8bccdc64669dde52c5