资讯专栏INFORMATION COLUMN

使用 dpdm 定位 JavaScript/TypeScript 中的循环依赖

BLUE / 2986人阅读

摘要:在写大型项目的时候一不小心就会踩到直接循环依赖的坑里面所谓直接循环依赖是指在模块工厂函数中对其它依赖于自己的模块的成员有直接调用的情况比如假设有两个模块和其中的内容如下的内容如下下面这一行导致了直接循环依赖这时执行会报的错误这是因为模块的工

在写大型项目的时候, 一不小心就会踩到直接循环依赖的坑里面, 所谓直接循环依赖, 是指在模块工厂函数中, 对其它依赖于自己的模块的成员有直接调用的情况. 比如:

假设有两个模块 a.jsb.js, 其中 a.js 的内容如下:

const b = require("./b")

exports.hello_a = function hello_a() {
  return "a"
}

exports.hello_from_b = function hello_from_b() {
  return b.hello_b()
}

b.js 的内容如下:

const a = require("./a")

// 下面这一行导致了直接循环依赖
exports.hello_from_a = a.hello_a()

exports.hello_b = function hello_b() {
  return "b"
}

这时, 执行 a.js, 会报 TypeError: a.hello_a is not a function 的错误, 这是因为模块 a.js 的工厂函数还在执行, 并且 hello_a 函数的声明尚未被执行, 而 b.js 就直接调用了 a.hello_a, 所以这个变量当成不存在, 也就报错了, 如果这不是一个函数而是一个变量, 则不会报错, 只是获取到的值为 undefined, 这种情况会更难定位问题.

虽然现在有一个项目叫 madge 可以用来定位循环依赖, 但是这个仓库在处理 TypeScript 的时候的输出简直就是个玄学问题, 会常常莫名其妙的忽略掉了不应该被忽略掉的文件, 这个问题后面我会举例说明.

所以我花了一天的时间来造了一个轮子: dpdm, 专门用来检测 JavaScriptTypeScript 项目中的循环依赖, 其目前可以检测下面这四种情况:

CommonJSrequire(...) 函数调用

ESM 的静态 import ... from ... 语句

ESM 的动态 import(...) 函数调用

ESM 的静态 export ... from ... 语句

能满足大多数情况的需要, 因为现在极少有人有用 AMDSystem 了.

使用方式

安装: dpdm 可以在命令行或者 js 项目中使用, 如果想在命令行使用(推荐), 则建议全局安装, 否则安装到你的项目中即可

# 全局安装
npm i -g dpdm # 或者用 yarn: yarn global add dpdm

# 项目目录中安装
npm i dpdm # 或者用 yarn: yarn add dpdm

在命令行中使用: 直接使用命令 dpdm [可选参数] <入口文件> 即可, 输出示例:

默认情况下会输出依赖树(tree), 循环依赖列表(circular), 以及警示信息(warning), 你可以使用参数关闭掉其中任意项, 比如 dpdm --tree false --warning false ./src/index.ts 来关闭依赖树和警示信息(仅展示循环依赖表).

可以使用 --output 来输出结果到 json 文件中

默认情况下忽略了 node_modules 中的内容, 可以使用 --exclude "" 来取消忽略

使用 --help 查看完整的帮助文档:

dpdm --help
dpdm [] entry...

Options:
  --version            Show version number                                                                     [boolean]
  --context            the context directory to shorten path, default is process.cwd()                          [string]
  --extensions, --ext  comma separated extensions to resolve          [string] [default: ".ts,.tsx,.mjs,.js,.jsx,.json"]
  --include            included filenames regexp in string                            [string] [default: ".m?[tj]sx?$"]
  --exclude            excluded filenames regexp in string                          [string] [default: "/node_modules/"]
  --output, -o         output json to file                                                                      [string]
  --tree               print tree to stdout                                                    [boolean] [default: true]
  --circular           print circular to stdout                                                [boolean] [default: true]
  --warning            print warning to stdout                                                 [boolean] [default: true]
  -h, --help           Show help                                                                               [boolean]

在代码中使用: dpdm 提供了若干 API, 具体可以查看包中提供的 .d.ts 提供的定义, 或者到 GitHub 查看文档:

比如:

import {
  parseCircular,
  parseDependencyTree,
  parseWarnings,
  prettyCircular,
  prettyTree,
  prettyWarning,
} from "dpdm";

parseDependencyTree(["./src/**/*"] /* 入口, glob 匹配, 可以是数组 */, {
  /* 参数列表, 下面这些是默认参数 */
  context: process.cwd(), // 前缀, 用来简写文件名
  extensions: ["", ".ts", ".tsx", ".mjs", ".js", ".jsx", ".json"], // 后缀
  include: /.m?[tj]sx?$/, // 需要解析的文件
  exclude: //node_modules//, // 需要忽略的文件
}).then((tree) => {
  console.log("Tree:");
  console.log(prettyTree(tree, Object.keys(tree)));
  console.log("");
  console.log("Circular:");
  console.log(prettyCircular(parseCircular(tree)));
  console.log("");
  console.log("Warning:");
  console.log(prettyWarning(parseWarnings(tree)));
});

提问题

项目在 GitHub 已开源, 地址是 https://github.com/acrazing/dpdm, 你可以到上面提 issue 或者提交 pr.

顺便, 求赞~

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105791.html

相关文章

  • ESLint 在中大型团队的应用实践

    摘要:自动化接入和升级方案通过命令行工具提供一键接入升级能力,同时集成到团队脚手架中,大大降低了工程接入和维护的成本。原始代码经过解析器的解析,在管道中逐一经过所有规则的检查,最终检测出所有不符合规范的代码,并输出为报告。 引言 代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到,并或多或少会思考过这一问题。随着前端应用的大型化和复杂化,越来越多的前端工程师和团队开始重...

    alogy 评论0 收藏0
  • jsweet中英文文档,java代码转js代码

    摘要:例如允许的对象默认情况下,通过使用内置宏将核心对象和方法映射到。例如这被转换为以下代码类可以定义构造函数,具有超类,并且可以像在中一样实例化。因此,它不违反原则。用于声明该对象可以用作构造函数。 这个工具可以将java代码转为js代码,从而可以使用java编写前端代码 如果排版看着费劲可以下载下方html,打开html后使用google翻译 JSweet语言规范版本:2.x(快照) 作...

    Near_Li 评论0 收藏0
  • jsweet中英文文档,java代码转js代码

    摘要:例如允许的对象默认情况下,通过使用内置宏将核心对象和方法映射到。例如这被转换为以下代码类可以定义构造函数,具有超类,并且可以像在中一样实例化。因此,它不违反原则。用于声明该对象可以用作构造函数。 这个工具可以将java代码转为js代码,从而可以使用java编写前端代码 如果排版看着费劲可以下载下方html,打开html后使用google翻译 JSweet语言规范版本:2.x(快照) 作...

    Mr_houzi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<