npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

js-analyzer-server

v2.3.23

Published

一个可视化可交互的 Web 文件依赖分析工具

Downloads

5

Readme

为什么

  • 代码重构:通过分析依赖关系,我们可以更好地理解代码的结构和逻辑,从而更容易地进行代码重构和优化。
  • 模块化开发:通过分析依赖关系,我们可以将项目拆分成多个模块,每个模块都有清晰的职责和依赖关系,从而实现模块化开发和管理。
  • 代码测试:通过分析依赖关系,我们可以更容易地编写和运行单元测试,从而提高代码的质量和可靠性。
  • 代码维护:通过分析依赖关系,我们可以更容易地定位和解决代码中的问题,从而提高代码的可维护性和可扩展性。

功能

  • 可交互的一体化可视化依赖分析系统
  • 支持动态切换入口文件
  • 支持依赖反转
  • 支持显示文件被引用次数,以及引用地址
  • 支持显示文件的导出变量被引用信息
  • 适用于 ES6、CommonJs
  • 支持的文件类型:JS、TS、JSX、TSX、Vue、Sass、Less、Css、html
  • 支持 package 依赖分析
  • 支持未引用 文件、npm 包分析
  • 本地存储 非常安全,不涉及联网和上传

双击某个节点,可进入该节点的依赖视图

单文件

双击某个节点后,点击左上角的正数第三个图标,切换成 上游依赖图

上游依赖图

单击视图中的某个节点,弹出文件依赖详情信息

单个文件依赖详情信息

更新

  • 支持 VUE SETUP 类型
  • 可自定义插件,生成你想要的数据
  • 内置项目热词插件支持
  • 文件依赖视图:支持单个文件夹内依赖关系视图
  • Sass、Less、Css 等样式文件分析(New, 已支持)
  • 支持项目变量热词图

全局安装

1. 安装

npm install @js-analyzer/server -g
# yarn add @js-analyzer/server -g
# pnpm install @js-analyzer/server -g

2. 使用

控制台进入到任意项目根目录下,执行 js-analyzer --root ./

cd /xxx/project

js-analyzer --root ./

局部安装

1. 安装

npm install @js-analyzer/server -D
# yarn add @js-analyzer/server -D
# pnpm install @js-analyzer/server -D

2. 使用

1.在 scripts 中添加 js-analyzer 命令

"scripts": {
  "js-analyzer": "js-analyzer --root ./"
},

2.在控制台输入 npm run js-analyzer,访问 http://localhost:8088/ 就能看到了。

npm run js-analyzer
# Service started:http://localhost:8088/

配置文件

通过上面的命令已经能很快启动一个分析服务了,可是每个项目的整体架构不同,想要 js-analyzer 更好的更准确的分析,还需要配置一些必要信息。

指定配置文件只需要将上面的启动命令修改一下

"scripts": {
  "js-analyzer": "js-analyzer --config ./js-analyzer.js"
},

js-analyzer.js

module.exports = {
  // 根目录
  root: "/Users/ll/Downloads/react-admin-master",
  // 不需要分析的目录
  ignore: ["**/node_modules/**", "**/dist/**"],
  // 解析没有扩展名的文件时优先查找顺序
  extensions: [".js", ".ts", ".tsx", ".vue", ".json", "jsx"],
  // 项目的别名映射路径
  alias: {
    "@@/": "/",
    "~~/": "/",
    "@/": "/src/",
    "~/": "/src/",
  },
  // 启动的服务器和端口相关
  server: {
    port: 8088,
    host: "localhost",
    openBrowser: true, // 启动后自动在浏览器打开
  },
};

TODO

  • 项目组件文档生成共享模块
  • 循环依赖分析
  • 模块稳定性指标分析

插件开发

该工具原理是通过解析 AST 收集了相关依赖信息,理论上用户同样可以在这个过程中收集到自己想要的任何信息。所以提供了插件的方式,暴露出各个阶段的生命周期,允许用户在生命周期函数中执行任何逻辑。

示例:一个项目内使用到的变量名收集插件

const myCustomPlugin = {
  name: "MyCustomPlugin",
  // 输出信息
  output: {
    data: [],
    file: "test.json",
  },
  // 解析 script 时执行
  ScriptParser({ file, content }) {
    const self = this;
    return {
      VariableDeclarator(tPath) {
        tPath.node.id && self.output.data.push(tPath.node.id.name);
      },
    };
  },
  // 解析完 script 时执行
  AfterScriptParser() {},
};

module.exports = {
  plugins: [myCustomPlugin],
};

自定义生成数据,默认访问地址 'http://localhost:8087/data/test.json'

邀请

秉承整洁代码意志,希望更多的人加入到这个项目中,目标是构建一个能帮助所有前端程序员重构/整洁代码的辅助工具。