什么是 npm 包？
npm（Node Package Manager）是 Node.js 的包管理工具。npm 包是一种封装 JavaScript 代码的形式，可以在 Node.js 和前端项目中被引用和使用。
什么是 cabinet？
cabinet 是一个 npm 包，可以帮助前端开发者从 JavaScript 代码中提取出 import 和 require 语句。它能够帮助我们快速地找到项目中所有使用的 npm 包和模块，并且可以生成一个配置文件，当我们使用 Webpack 或 Rollup 等打包工具时，能够将这些依赖打包到一起。
使用 cabinet
安装 cabinet
要使用 cabinet 包，我们需要在项目中安装它：
npm install @babel/parser @babel/traverse @babel/types @babel/generator @babel/code-frame cabinet
提取 import 和 require 语句
我们可以使用 cabinet 提供的 extract 函数，传入一个 JavaScript 代码字符串，即可提取出其中的 import 和 require 语句。
-- -------------------- ---- ------- ----- - ------- - - ------------------- ----- ---- - - ------ - --- - ---- --------- ----- ----- - ------- -- ---- ----- - - ------------------ ----- ----- - -- ----- ------ ---- -- -- - ----- -------- ---- -- --- ----- ----------- - --------------- --------- -- ----- - ------ --------- - - -------------- ------------------- -----------------------展开代码
上面的代码中，我们定义了一个 JavaScript 代码字符串，其中有两个 import 和 require 语句。我们传入这个代码字符串到 extract 函数中，并且通过 found 和 codeFrame 获取到提取出的结果和代码位置信息。
extract 函数的返回值是一个包含 found 和 codeFrame 两个属性的对象。found 属性是一个数组，其中包含了从代码中提取出的 import 和 require 语句。codeFrame 属性是一个字符串，其中包含了代码中每个 import 和 require 语句的位置信息。
输出结果为：
-- -------------------- ---- ------- - - ------- ------------- ------ - -- - -- ---- - -- -- - -- - ------- ------------- ------ - -- -- -- ---- - -- -- - - - - - ------ - --- - ---- --------- - - - ----- ----- - ------- -- ---- - - - - - - ----- - - ------------------ - - ----- ----- - -- ----- ------ ---- -- -- - ----- -------- ---- -- ---展开代码
我们可以看到 found 中包含了两个对象，其中 source 是提取出的依赖包名称，start 和 end 分别表示该语句在代码中的开始和结束行/列号。codeFrame 中的箭头指向了错误出现的位置。
生成配置文件
在使用 extract 函数提取出了 import 和 require 语句后，我们可以使用生成器函数 generateConfig 生成用于打包工具的配置文件。
-- -------------------- ---- ------- ----- - -------- -------------- - - ------------------- ----- ---- - - ------ - --- - ---- --------- ----- ----- - ------- -- ---- ----- - - ------------------ ----- ----- - -- ----- ------ ---- -- -- - ----- -------- ---- -- --- ----- ----------- - --------------- --------- -- ----- - ----- - - -------------- ----- ------ - ---------------------- --------------------展开代码
在上面的代码中，我们传入了 found 数组到 generateConfig 函数中，生成了一个打包工具的配置文件。
输出结果为：
-- -------------------- ---- ------- - ---------------- - ----- -------- -------- ----------------- -------- -- -- ------------------ - ----- ---------- -------- -- -- --------------- - ----- ----------- -------- -- -- ------------------- - ----- ---------------- -------- -- -- -------------------- - ----- ----------------- -------- -- -- ------- - ----- ----- -------- -- - -展开代码
我们可以看到，生成器函数返回了一个对象，其中每个属性都是一个 npm 包名称，对应的值是一个配置对象，包含了该包在打包工具中的根节点名称和其他配置信息。我们可以将该对象传递给 Webpack 或 Rollup 等打包工具，让它们在打包时将这些依赖包打包到一起。
总结
本文介绍了 npm 包 cabinet 的使用方法，希望能够帮助读者更加方便地提取代码中的依赖关系，并且有效地打包前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/78123
