browserify-extract-ids 是一个方便的 npm 包，它可以让我们在 browserify 打包过程中提取出我们引用的模块的 ID。这对于我们分析项目的依赖关系，或是打包过程中对某些模块进行特殊处理，都是非常有用的。
安装和使用
使用 npm 安装 browserify-extract-ids:
--- ------- ---------------------- ----------
然后在 package.json 中配置我们的 browserify 打包命令，加入 --plugin 参数来使用 browserify-extract-ids：
-
---------- -
-------- ----------- ------------- -------- - ---------------------- ------ ------- - -- -----------------
-
-我们可以把这个命令解析一下，其中：
./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 文件中，格式如下：
---------------- -- - ---------------- -- - ---
我们在 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 代码：
------------ ------ ---- -- ----------------------- --------------------- --------- ----------------------------------------------
在上面的代码中，我们使用 .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 编译我们的代码：
------------ ------ ---- -- ------------------- -------------------------------- --------- ----------------------------------------------
以上代码会在构建过程中使用 log-transform.js 来处理每个 JavaScript 文件，替换其中的 console.log 语句。
browserify-extract-ids 实现原理
了解了上述基础知识之后，我们就可以来看一看 browserify-extract-ids 的实现过程了。
我们先来看一下 browserify-extract-ids 的代码结构：
- --- -------- --- ---------
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