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

analysis-tool

v1.0.3

Published

Analyze the dependency relationships in package-lock.json

Downloads

10

Readme

🌟 npm 依赖分析工具 🐳

analyze-tool将从package-lock.json文件出发,通过递归分析所有位于node_modules目录中的package.json文件,来生成依赖关系数据,并利用 Echarts 进行可视化渲染。

🎉 开始使用

1. 全局安装

npm install analyze-tool -g

安装完成后,在项目根目录的命令行窗口中运行以下命令来分析依赖项。分析结果将自动在一个网页中打开。

analyze-cli analyze

如果您想提高依赖项的下载速度,可以设置淘宝镜像源:

npm config set registry http://registry.npm.taobao.org/

您还可以使用 --depth [n] 参数来限制递归分析的深度。

analyze-cli analyze --depth [n]

要将依赖关系保存为 JSON 文件而不打开网页,请使用 --json [file-path] 参数并指定文件路径。

analyze-cli analyze --json [file-path]

2. 局部安装

如果您的 npm 支持npx,可以采用下列的命令快速上手.

  1. 安装依赖: npm install analyze-tool
  2. 运行依赖分析: npx analyze-tool analyze
  3. 查看所有参数选项: npx analyze-tool analyze --help

📝 目录结构

  │   main.ts                 // 入口函数, 用于处理命令接收参数
  │   .eslintgrnore           // eslint忽略配置文件
  │   .eslintrc.json          // eslint代码规范配置文件
  │   .prettierr.json         // 代码格式化配置文件
  │   analyze.test.ts         // jest测试代码文件
  │   build.ts                // 编译ts到dist,public文件复制到dist
  │   jest.config.js          // jest配置文件
  │   package.json            // 项目配置信息
  │
  ├───public
  │   │   index.html          // 前端可视化基本文件
  │   │
  │   └───js
  │           axios.js        // 原生http封装axios
  │           echarts.min.js  // echarts库
  │           macarons.js     // Eaharts 主题
  │           renderEcharts.js// 前端渲染主文件
  │           renderReport.js // 分析报告文件
  │
  └───src
  │   │   analysis.ts         // 分析依赖并生成json数据
  │   │   server.ts           // 启动后台服务
  │   │   type.ts             // typescript类型限制处理
  │   │
  │   └───data                // 临时存放生成的json数据 
  │
  └───dist                    // build之后存放的文件

🎨 Demo 展示

🦄 技术栈

功能开发:

  • 依赖关系图:使用echarts可视化

工程化:

  • 使用 TypeScript 开发;
  • 使用 jest 实现单元测试;
  • 接入 eslint, prettier, lint-staged 代码风格自动化工具;