开发工具静态分析代码质量【免费下载链接】dependency-cruiserValidate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.项目地址https://gitcode.com/gh_mirrors/de/dependency-cruiser点击查看免费下载导读dependency-cruiser 在分析 React、Vue 项目时需要从.jsx、.tsx乃至 Vue 单文件组件中提取依赖import/export/require。为此项目维护者在解析 JSX 的三种技术路线——Babel 转译、acorn-jsx 严格解析、acorn_loose 宽松解析——之间进行了深入评估并最终确定了一套acorn-jsx acorn-jsx-walk 为主、acorn-loose 兜底、Babel 可选介入的实现方案。本文以仓库内 JSX 实现取舍说明 为骨架结合 解析模块、依赖提取模块 与 转译模块 等源码完整还原该选型推理过程与最终架构帮助你理解为何 dependency-cruiser 能在不捆绑任何 Babel 插件的前提下稳健地分析各类含 JSX 的前端项目。一、问题背景dependency-cruiser 为什么要啃 JSXdependency-cruiser 的核心能力是从源码中提取模块依赖关系。对纯 JavaScriptES6、CommonJS、AMD而言acorn 足以胜任但前端项目普遍使用 JSX/TSX 语法而 acorn 原生解析器并不认识JSXElement、JSXAttribute这类节点。同时项目的既定哲学是尽量复用项目自身已经安装的转译器而非把庞大的转译链打包进 dependency-cruiser 自身。这两点构成了 JSX 支持实现时的基本约束必须能正确解析.jsx、.tsx文件只需要依赖声明import / export / require / dynamic import对 JSX 表达式的语义并不关心不能强制要求所有 React 项目安装特定的 Babel 预设或插件。从当前源码看该约束被落实为两层结构先由 transpile 模块 决定是否调用 Babel 或其它转译器对源码做预处理再由 acorn 解析模块 决定用哪种解析器生成 AST最后在 AST 上做依赖提取。二、候选方案一Babel 转译未采纳留作后续选项文档记录的第一次尝试是把 JSX 作为一种新的 alt-js 语言引入使用babel-core作为转译器。这一方案的核心事实如下babel-plugin-transform-react-jsx只负责把 JSX 语法转换成React.createElement调用对于纯 JSX 增量的无修饰 JS约等于 ES3足够但大多数 React 项目实际使用 ES6 语法class、模块等仅靠这一个插件转译会失败。babel-preset-react是插件的集合除transform-react-jsx外还包含典型 React 项目所需的 ES6 支持覆盖面更完整。然而这一方案与 dependency-cruiser 的哲学冲突明显它要求依赖项目里恰好装着某个特定的 Babel 插件或预设而实际上——React Native 项目通常使用另一套插件如babel-preset-react-native项目有权自由组合任意 Babel 插件不存在一个对所有人都适用的固定集合即便违背哲学、由 dependency-cruiser 自行打包一组 Babel 插件超集也无法覆盖所有情况且体积代价不小文档记录了当时 core-js 库约 7.2 MB、babel-core 约 1.1 MB加上插件与其它依赖。文档还做了更细的生态调研babelbabel-preset-react是从 JSX 到可解析代码的主流路径create-react-app虽自带babel-preset-react-app但底层仍依赖babel-preset-reactnode-jsx已弃用并指向 BabelReact Native 则使用babel-preset-react-native不利。babel-plugin-transform-react-jsx可看作合理的公共分母但它在大多数 React 项目里无法单独工作。结论是短期内不可行但留作未来选项。这一可选介入的设计至今仍保留在代码中在 transpile 模块 里定义了一个BABEL_ABLE_EXTENSIONS集合.js/.cjs/.mjs/.jsx/.ts/.tsx/.d.ts等当传入的 transpiler 选项中存在非空babelConfig且文件扩展名在该集合内时就改用 babel-wrap.mjs 处理——即项目自带 Babel 配置dependency-cruiser 就顺水推舟用它先转译。babelWrap的transpile直接调用babel/core的transformSync并把filename传入文档中提到的 issue #410 相关处理确保那些假设源码带文件名的 Babel 插件能正常工作。同时 babel-wrap.mjs 通过isAvailable()检查babel/core是否可用不可用时 transpile 模块 会退回原样返回源码。三、候选方案二acorn acorn-jsx最终采纳在解析层面文档记录的第二个方案是在提取步骤引入acorn-jsx。其优势是相对优雅.js照常解析无碍.jsx也能正确解析后者生成的 AST 中会包含JSXxxx系列节点acorn-jsx是 FacebookReact和 Babel 都使用的官方JSX 解析器生态认可度高。但随之而来的问题也很具体dependency-cruiser 在 AST 上做依赖提取时使用 acorn 自带的树遍历器tree-walker而它无法识别acorn-jsx产出的新型JSXxxx节点。文档给出了两条解决思路使用acorn-jsx-walk包。文档早期对其有疑虑更新不频繁、依赖多、代码库不理想但 2020-11-16 的更新注记推翻了这些顾虑该包零依赖、代码极简清晰、无需频繁更新完全可以引入对解析出的树做过滤/变换以剔除JSXxxx节点——但维护者并不关心这些节点且预判正确地做这件事并不简单。最终两条路线都被采用并融合进了现在的实现。看 parse.mjsconst acornJsxParser acornParser.extend(acornJsx());—— 用acorn-jsx扩展 acorn 的ParserneedsJSXTreatment()判定两种情况需要 JSX 处理文件扩展名是.jsx或者扩展名是.tsx且 tsconfig 中jsx编译选项为preserve源码中的常量PRESERVE_JSX: 1命中时用acornJsxParser.parse()解析同时开启allowNamespacedObjects未命中则用原生acornParseecmaVersion: 11以保证能理解 dynamic import解析失败时统一回退到acornLooseParse即 acorn-loose 宽松解析兜底。而依赖提取侧的能认识 JSX 节点由 extract-es6-deps.mjs 完成import { extend } from acorn-jsx-walk后调用extend(walk_base)把acorn-walk的base访问器扩展为能够安全穿过 JSX 节点随后walk_simple只关心ImportDeclaration、ImportExpression、ExportAllDeclaration、ExportNamedDeclaration四种节点——这与文档只关心 imports、exports、requires的取舍完全一致。测试用例也印证了这点见 extract-es6-deps.spec.mjs其中专门验证JSX 组件中的 import 关键字不会误导提取同时诚实标注了当前对某些 JSX 写法如特定命名空间形式尚不支持。tsconfigpreserve场景则有 parse.spec.mjs 覆盖preserve的 tsx 按 JSX 解析而非preserve的 tsx 不会产生奇怪的 import。四、候选方案三acorn_loose曾被采用9.17.0 起弃用文档记录的第三个方案是acorn_loose宽松解析器当时已是 acorn 的一部分、也是 dependency-cruiser 的既有依赖。其取舍依据是几个观察JSX 文件中的依赖声明import/export/require通常出现在文件顶部有时受语言/列举规则影响也仅此而已项目只关心依赖声明不关心 JSX 表达式acorn_loose在多数正常场景下能正确取出依赖——尤其是顶部声明位于 JSX 语句下方时通常也能取到它已是 acorn 内置、零新增依赖且快速稳定实现与测试成本极低。文档明确注明该方案一直使用到 dependency-cruiser 9.17.0此后切换到acorn-jsx acorn-jsx-walk的组合。值得注意的是文档标题下最初写的是选择了 acorn_loose第三个选项并在 9.17.0 处更正为最终形态说明这是一段真实的演进先用宽松解析快速解决问题再被更严谨的 acorn-jsx 方案取代。而宽松解析并未完全消失——如上一节所示当前 parse.mjs 仍保留acornLooseParse作为严格解析失败时的兜底例如源码存在语法错误或极端写法时仍能尽量捞出依赖。这既延续了历史方案的价值也体现了解析失败不放弃提取的稳健设计。五、Vue 场景模板与单文件组件的不同路径文档在 JSX 之外还记录了 Vue 支持的两条不同路线同样值得展开模板 / JSX 语法维护者用类似的排除法调研了把 Vue 模板转换成 JavaScript 的多种方式但未能找到一种在所有情况下都令人满意的方案因此 Vue 模板最终也走了acorn_loose路线——性能尚可文档也坦诚更优雅的方案欢迎贡献。单文件组件SFC这里的情况更好。Vue 2 使用vue-template-compiler、Vue 3 使用vue/compiler-sfc它们会把template、script、style等部分干净地拆分成对象各部分可以独立解析。具体实现在 vue-template-wrap.cjs先用tryRequire尝试加载vue-template-compiler失败Vue 3 项目加载它会报不兼容错误则回退到vue/compiler-sfcvue3Transpile用其parse拿到descriptor.script与descriptor.scriptSetup的内容拼接返回vue2Transpile则用parseComponent做同样的事解析出错时返回空串。这与文档它把模板、脚本、样式等部分拆成对象、可分别解析的描述一一对应。六、最终架构小结解析管线如何串起来把上述选型整合起来当前仓库中 JSX/TSX 相关文件从源码到依赖的完整管线如下扩展名分发transpile 模块 维护EXTENSION2WRAPPER映射.jsx与.js/.cjs/.mjs一样映射到javaScriptWrap原样返回即无需转译.tsx映射到 tsx 模式的 typescript 包装器.vue映射到上面说的vueWrap扩展名映射与转译器可用性还汇总在 meta.mjs 中。可选 Babel若选项里带非空babelConfig且扩展名在BABEL_ABLE_EXTENSIONS中则先经 babel-wrap.mjs 转译。JSX 感知解析parse.mjs 对.jsx与jsx: preserve的.tsx使用acorn-jsx扩展解析器其余用原生 acorn两者失败都回退acorn-looseAST 带进程内缓存getASTCached。依赖提取extract-es6-deps.mjs 借助acorn-jsx-walk扩展acorn-walk的base在含 JSX 节点的树上安全遍历只收集 import/export/dynamic-import 声明CommonJS 与 AMD 依赖分别由 extract-cjs-deps.mjs 与 extract-amd-deps.mjs 处理。入口约定normalize-cli-options.mjs 默认即包含jsx、tsx、vue等扩展名开箱即可扫描 React/Vue 项目。这套方案用一句话概括就是依赖项目已有的 Babel可选、用 acorn-jsx 做严格解析、用 acorn-jsx-walk 穿过 JSX 节点、用 acorn-loose 兜底容错——在不捆绑任何前端插件的哲学约束下既保证了对主流 React/Vue 项目依赖的准确提取又保持了解析失败时的可用性。对于想为 dependency-cruiser 贡献替代实现的开发者这份 选型文档 记录了完整的调研轨迹可避免重复踩坑。赞分享开发工具静态分析代码质量【免费下载链接】dependency-cruiserValidate and visualize dependencies. Your rules. JavaScript, TypeScript, CoffeeScript. ES6, CommonJS, AMD.项目地址https://gitcode.com/gh_mirrors/de/dependency-cruiser点击查看免费下载相关推荐svgr/babel-plugin-remove-jsx-attribute 深度解析从源码到 SVGR 版本演进svgr/babel plugin remove jsx attribute 深度解析从源码到 SVGR 版本演进 导读 svgr/babel plugi前端开发工具emotion/babel-plugin-jsx-pragmatic 源码解析动态注入 JSX pragma 模块导入的 Babel 插件及其版本演进emotion/babel plugin jsx pragmatic 源码解析动态注入 JSX pragma 模块导入的 Babel 插件及其版本演进 本指前端svgr/babel-plugin-remove-jsx-attribute从 JSX 中精准移除冗余属性的 Babel 插件svgr/babel plugin remove jsx attribute从 JSX 中精准移除冗余属性的 Babel 插件 导读 svgr/babel前端开发工具上一篇如何快速上手spotify_to_ytmusic5分钟完成安装与配置的完整教程下一篇终极指南Unity程序化地形生成技术 - 从零到无限世界的完整教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
