如果你是前端开发者，你一定知道依赖管理工具 npm。npm 是一个强大的工具，可以协助我们管理 JavaScript 依赖包，但是当我们需要查找一个依赖包的时候，我们往往会遇到困难，这时 filing-cabinet 这个 npm 包就可以派上用场了。
什么是 filing-cabinet？
filing-cabinet 是一个基于 JavaScript ES6 语法分析的引用关系解析工具。它可以帮助我们查找 JavaScript 依赖的依赖关系，方便我们在开发过程中进行有针对性的代码优化，也可以减少我们在提交代码时不必要的依赖关系。
如何使用 filing-cabinet
使用 filing-cabinet 最方便的方式是通过 npm 安装，使用以下命令即可：
--- ------- -------------- ----------
安装成功后你可以在你的项目中使用：
----- ------- - --------------------------
来引入 filing-cabinet。
使用方法
filing-cabinet 可以很方便的帮助我们查找我们的代码中引用了哪些依赖。
使用 filing-cabinet 的最基本方式是：
----- ---- - --------- -------- ----------------------------- -- - --- ----- ---
在这个例子中，我们指定了要解析的 JavaScript 文件的路径，并且配置了 ts 选项，告诉 filing-cabinet 不要解析 TypeScript 文件。
我们可以这样来解析一个字符串：
----- ---- - --------- ------- ------- ----- ---- --------- -- - --- ----- ---
默认情况下，filing-cabinet 支持以下文件类型：.js、.jsx、.ts、.tsx。我们还可以通过配置自定义文件类型，例如：
----- ---- - ---------
-------- ------------------------
-- -
------- -
---------- ----------
--------- ------------
---------- -
----------- ----------
------------ --------------------- -------------------------------------------------
------------- ------
-
-
---在这个例子中，为 filing-cabinet 配置了对 .sass 文件的解析，指定了输出默认值的方式、使用的解析器和可能出现的解析函数等属性。
filing-cabinet 示例代码
在这个例子中，我们将使用 filing-cabinet 来查找我们的代码中引用了哪些 React 组件。请先确保安装好 filing-cabinet 和 React。
----- ------- - --------------------------
----- -- - --------------
----- ---- - ----------------
-- --------------
----- ------- - ---------------
-- -------------
----- ---------- - ------- --------
----- ------------- - -
----------------- -
------------- ----------
--
---------- -
-------- ---------------------------- --------
-
--
-- ---------------
----- -------- - ------------------------ --------
----- ------------ - ---------
--------
--------- --------
---------
---- ------
--------------
-- ----
-- ------------ ----- --
--------------------------------------------------------------------在这个例子中，首先我们需要定义被查找依赖的文件路径储存在 partial 中。
接着，我们为 filing-cabinet 配置依赖的文件类型和其关系，储存在 extensions 和 packageConfig 中。extensions 定义了需要查找的文件扩展名，这里为 .js 和 .jsx。packageConfig 中包含了一些重要的属性，webpackResolve 属性指定了查找解析过程中需要使用的 webpack 解析配置选项，这里我们指定了查找的文件扩展名。aliases 属性指定了 resolution 中可能的别名。
接下来，我们使用 fs.readFileSync 来读取文件内容并打开节点。并通过 cabinet 函数来解析依赖关系。
最后，我们通过 dependancies 来输出所有引用的 React 组件。
总结
本文中，我们介绍了 filing-cabinet 这个 npm 包，提供了它的使用教程和示例代码。在前端开发过程中，使用 filing-cabinet 可以方便地查找 JavaScript 代码中的引用关系，也让代码的优化和维护变得更加高效。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57248