browserify-extract-ids 是一个方便的 npm 包，它可以让我们在 browserify 打包过程中提取出我们引用的模块的 ID。这对于我们分析项目的依赖关系，或是打包过程中对某些模块进行特殊处理，都是非常有用的。
安装和使用
使用 npm 安装 browserify-extract-ids:
npm install browserify-extract-ids --save-dev
然后在 package.json 中配置我们的 browserify 打包命令，加入 --plugin 参数来使用 browserify-extract-ids：
{ "scripts": { "build": "browserify ./src/main.js --plugin [ browserify-extract-ids --file ids.txt ] -o ./dist/bundle.js" } }
我们可以把这个命令解析一下，其中：
./src/main.js替换为你自己的入口文件。--plugin [ browserify-extract-ids --file ids.txt ]表示使用browserify-extract-ids插件，并把提取出的 ID 写入ids.txt文件中。-o ./dist/bundle.js是我们想要生成的 browserify bundle 的文件路径。
在执行 npm run build 命令时，browserify-extract-ids 将会在打包过程中提取每个模块的 ID，并写入到 ids.txt 文件中，格式如下：
path/to/module/a -> 1 path/to/module/b -> 2 ...
我们在 ids.txt 文件中就可以找到所有模块的 ID 了！
深度学习
我们不能不深入了解 browserify-extract-ids 是如何工作的。它实现了一个 browserify transform，可以让我们在执行 browserify 打包命令时插入自定义处理逻辑。
具体来说，我们在命令中配置的 -plugin [ browserify-extract-ids --file ids.txt ] 就是要使用 browserify-extract-ids 插件，其中，
--file ids.txt表示我们想把提取出的 ID 写入到ids.txt文件中。browserify-extract-ids就是一个 Node.js 模块，在我们的命令中可以直接引入和使用。
接下来，我们就来深入看一看 browserify-extract-ids 的实现过程。
基础知识
在深入理解 browserify-extract-ids 之前，我们需要首先了解一些 browserify 的基础知识，包括以下几个概念：
browserify 的运作过程
首先我们需要了解，browserify 的运作过程就是把一个类似于 CommonJS 模块的项目构建成一个单一的 JavaScript 文件。我们先来看一下 JavaScript 中的模块化是如何实现的。
JavaScript 中有 var 和 function 两种声明变量的方式，但是这些变量是全局的，并不会隔离作用域。于是我们通过 IIFE (Immediately Invoked Function Expression) 技术来实现模块化。
-- -------------------- ---- ------- -- ---- ----------- - --- ---- - ---- ------------------ ---- -- ---- ----------- - --- ---- - ---- ------------------ ----展开代码
如果我们想在另一个 JavaScript 文件中也用到这些变量，就需要手动导入导出这些变量：
-- -------------------- ---- ------- -- ---- --- ---- - ---- -------------- - - ----- ---- -- -- ---- --- - - -------------- --- ---- - ---- ------------------- ------展开代码
这样，我们就可以在 b.js 中使用 a.js 中的变量了，这就是 CommonJS 的实现方式。
而 browserify 就是类似地扫描整个项目，找到所有用 require 导入的模块，把它们一起打包成一个 JavaScript 文件。例如：
-- -------------------- ---- ------- -- ------ --- - - -------------- --- - - -------------- ------------------- -------- -- ---- --- ---- - ---- -------------- - - ----- ---- -- -- ---- --- ---- - ---- -------------- - - ----- ---- --展开代码
当我们使用 browserify 把 app.js 打包后，就可以得到一个文件包含了所有的模块：
-- -------------------- ---- ------- -- ------- ----- ---- ------ ---------- --- ----------- - --- ---- - ---- --- - - - ----- ---- -- --- ------ - ---- --- - - - ----- ------ -- ------------------- -------- -----展开代码
这样我们就可以方便地在浏览器端使用模块了。
browserify transform
我们已经理解了 browserify 的基本运作过程，接下来我们来了解 transform，它是 browserify 中的一个概念。
在 browserify 中，transform 可以看作是在构建过程中对单个模块进行处理。例如，我们可以通过 browserify 内置的 coffeeify transform 来打包 CoffeeScript 代码：
browserify({ debug: true }) .add('src/main.coffee') .transform(coffeeify) .bundle() .pipe(fs.createWriteStream('dist/bundle.js'));
在上面的代码中，我们使用 .transform(coffeeify) 来使用 coffeeify transform，将 src/main.coffee 文件编译为 JavaScript，然后将整个应用程序打包到 dist/bundle.js 文件中。
创建 browserify transform
我们已经了解了 browserify 的基本概念，接下来我们就可以来创建一个简单的 transform。
首先我们需要创建一个 Node.js 模块，可以使用 module.exports 来暴露一个函数作为 transform 的处理函数。我们假设我们要创建一个 transform，把所有 JavaScript 文件中的 console.log 方法替换为自定义的方法 customLogger：
-- -------------------- ---- ------- -- ---------------- --- ------- - -------------------- -------------- - -------------- - --- ------ - --------------------- -- ----- - --- -------- - --------------- -------- - ----------------------------------------- --------------------- -------------------- ------- --- ------ ------- --展开代码
然后，我们可以使用这个 transform 编译我们的代码：
browserify({ debug: true }) .add('src/main.js') .transform('./log-transform.js') .bundle() .pipe(fs.createWriteStream('dist/bundle.js'));
以上代码会在构建过程中使用 log-transform.js 来处理每个 JavaScript 文件，替换其中的 console.log 语句。
browserify-extract-ids 实现原理
了解了上述基础知识之后，我们就可以来看一看 browserify-extract-ids 的实现过程了。
我们先来看一下 browserify-extract-ids 的代码结构：
. ├── index.js └── README.md
index.js: 定义了browserify-extract-ids的处理函数。README.md:npm包的文档。
在 index.js 中，我们暴露了一个函数 extractIds，这个函数就是我们的 transform 处理函数：
-- -------------------- ---- ------- -------------- - -------------- ----- - --- ---- - --- ------ --------------------- -- ----- - ---- -- ---- ------- -- ---------- - --- --- - ----------------------- --- ------ - --------- -- ---------- ------ - ------------------------------------------ --------- ------------------------ ---------------- ---------------- ---------------- --- --展开代码
在 transform 处理函数中，我们使用 through2 创建了一个 transform，其中主要的工作就是在模块变换流的结束时，提取模块 ID 并写入文件中。
我们主要关注一下 extractModuleIds 函数的实现，以了解 browserify-extract-ids 的处理逻辑：
-- -------------------- ---- ------- -------- ---------------------- - --- ------ - ------------------ --- ---------- - ------------------------------------ --- --- - --- -- --- --- ------ ----------- -- ---- ------- ------- -- ------ --- -- --- ----- ----------------- ----- ----- -- --- ---------- ------- -- -- --- ------ -------- -- -- ---- ---- ----- -- ----- -------- --------------- ----------- - --- -------- - --- ----------- ----------------- - ---------- - ------------------------ - ----- - -- - ----- - --- --- ----------- - ------------ - -- ------ --- ---- - ------ --------------------------------------- ----- ----- - ---- - ------ ------------ - -- ------------------- - ----------------- - ------ -------------------------------- --------- ------- -- ---------------------- - ------------------- -------------- - --------------------------------------------------------- --- - ---------------- - -------- -- ------ -------------------------- - -- --- - --------- ---- -- ----- ------ --- --- ------ ----- --- ---------- - --------------- -------------- - --------------------- - --- -------- - ------------------------------------ ------ ----------------- - - -- - - --------------------- ---------------- ------ ---------------------- ----------- -- ------------------------ --------------------- --- - --- - -- ------ ---- ------- ----- --- -- ---- ------- --- ------- -- ------- -- ---- -- ------------ -- ----------- --------- --- ------ ---------- ------------------------------------ ------------------- - -------- -- --- -------------- - ----------- ------ ---- -展开代码
我们会发现，extractModuleIds 函数主要做了以下几件事情：
- 构造了一个自定义的
require函数，通过模拟出一个虚拟的 JavaScript 文件来获取每个模块的 ID。 - 通过正则表达式寻找所有的
require函数调用，并执行这些代码以执行所有的require函数。 - 调用
realRequire恢复原来的require函数。
这样就可以实现对于所有模块 ID 的提取了。
总结
在本篇文章中，我们介绍了 browserify-extract-ids npm 包的使用教程，以及其原理实现。了解了 browserify 和 transform 的基础知识后，我们可以扩展实现出自己想要的功能，进一步增强工具的价值和使用价值，帮助自己更好地完成项目开发和管理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57289
