乐闻世界logo
搜索文章和话题

npm生态里有哪些实用工具?它们如何提升开发效率?

2月17日 22:52

npm 生态系统包含许多第三方工具和插件,可以扩展 npm 的功能。了解这些工具可以帮助开发者更高效地管理项目。

包管理工具

1. npm-check-updates

检查并更新 package.json 中的依赖版本。

bash
# 安装 npm install -g npm-check-updates # 检查更新 ncu # 更新 package.json ncu -u # 检查特定类型的依赖 ncu --dep prod ncu --dep dev ncu --dep dev,peer # 使用特定注册表 ncu --registry https://registry.npmmirror.com

输出示例

shell
Checking package.json [====================] Severity: minor lodash ^4.17.20 → ^4.17.21 minor express ^4.17.1 → ^4.18.0 major react ^17.0.0 → ^18.0.0 Run ncu -u to upgrade package.json

2. npm-check

交互式检查包的状态和更新。

bash
# 安装 npm install -g npm-check # 检查包 npm-check # 交互式更新 npm-check -u # 跳过更新 npm-check -y # 忽略特定包 npm-check --ignore-unused

3. depcheck

检查未使用的依赖和缺失的依赖。

bash
# 安装 npm install -g depcheck # 检查未使用的依赖 depcheck # 忽略特定包 depcheck --ignore-missing=package-name # 使用自定义配置 depcheck --config depcheck-config.json # 检查特定目录 depcheck ./src

输出示例

shell
Unused dependencies * lodash * moment Unused devDependencies * eslint Missing dependencies * axios (used in src/api.js)

安全工具

1. Snyk

强大的安全漏洞扫描和修复工具。

bash
# 安装 npm install -g snyk # 认证 snyk auth # 扫描漏洞 snyk test # 修复漏洞 snyk wizard # 监控项目 snyk monitor # CI/CD 集成 snyk test --severity-threshold=high

GitHub Actions 集成

yaml
- name: Run Snyk to check for vulnerabilities uses: snyk/actions/node@master env: SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}

2. npm audit fix

npm 内置的安全修复工具。

bash
# 自动修复 npm audit fix # 强制修复 npm audit fix --force # 只修复生产依赖 npm audit fix --production # 查看修复详情 npm audit fix --dry-run

3. retire.js

检查 JavaScript 库中的已知漏洞。

bash
# 安装 npm install -g retire # 扫描项目 retire --path <project-path> # 输出 JSON 格式 retire --outputformat json # 使用自定义数据库 retire --outputpath <custom-db>

性能工具

1. npm-packlist

确定哪些文件会被包含在发布的包中。

bash
# 安装 npm install -g npm-packlist # 列出文件 npm-packlist # 输出 JSON 格式 npm-packlist --json # 检查特定包 npm-packlist <package-path>

2. bundlephobia

分析包的大小和性能影响。

bash
# 在线使用 # 访问 https://bundlephobia.com/ # 查看包的大小 # 输入包名,如 "lodash"

3. cost-of-modules

计算项目依赖的维护成本。

bash
# 安装 npm install -g cost-of-modules # 计算成本 cost-of-modules # 输出 JSON 格式 cost-of-modules --json # 按成本排序 cost-of-modules --sort

代码质量工具

1. npm-check-updates

除了检查更新,还可以帮助维护代码质量。

bash
# 检查更新并自动更新 ncu -u # 只更新补丁版本 ncu -u --target patch # 只更新次版本 ncu -u --target minor

2. npm-run-all

并行或顺序运行多个 npm scripts。

bash
# 安装 npm install -g npm-run-all # 并行运行 run-p lint test # 顺序运行 run-s clean build test # 混合运行 run-s clean run-p lint test

package.json 示例

json
{ "scripts": { "clean": "rimraf dist", "lint": "eslint src/", "test": "jest", "build": "webpack", "all": "run-s clean run-p lint test build" } }

3. concurrently

同时运行多个命令。

bash
# 安装 npm install -g concurrently # 运行多个命令 concurrently "npm run dev" "npm run test:watch" # 使用前缀 concurrently --names "API,WEB" --prefix-colors "blue,green" "npm run api" "npm run web" # 成功时杀死其他进程 concurrently --kill-others "npm run dev" "npm run test"

文档工具

1. jsdoc

生成 JavaScript 文档。

bash
# 安装 npm install -g jsdoc # 生成文档 jsdoc src/ # 使用配置文件 jsdoc -c jsdoc.conf.json # 输出到特定目录 jsdoc src/ -d docs/

2. documentation.js

现代 JavaScript 文档生成器。

bash
# 安装 npm install -g documentation # 生成文档 documentation build src/ -f html -o docs/ # 生成 Markdown documentation build src/ -f md > API.md # 生成 JSON documentation build src/ -f json > api.json

测试工具

1. nyc

Istanbul 的命令行界面,用于代码覆盖率。

bash
# 安装 npm install -g nyc # 运行测试并生成覆盖率 nyc npm test # 生成报告 nyc report --reporter=html # 覆盖率阈值 nyc --check-coverage --lines 80 npm test

2. testdouble

用于测试的替身(test double)库。

bash
# 安装 npm install -g testdouble # 创建替身 const td = require('testdouble'); const fn = td.function(); fn('arg1', 'arg2'); td.verify(fn('arg1', 'arg2'));

构建工具

1. webpack

现代 JavaScript 应用程序的模块打包器。

bash
# 安装 npm install -g webpack webpack-cli # 构建 webpack # 使用配置文件 webpack --config webpack.config.js # 监听模式 webpack --watch # 生产模式 webpack --mode production

2. rollup

下一代 JavaScript 模块打包器。

bash
# 安装 npm install -g rollup # 构建 rollup src/main.js -f cjs -o bundle.js # 使用配置文件 rollup -c rollup.config.js # 监听模式 rollup -c -w

开发工具

1. nodemon

自动重启 Node.js 应用程序。

bash
# 安装 npm install -g nodemon # 运行应用 nodemon app.js # 监听特定文件 nodemon --watch src/ app.js # 忽略特定文件 nodemon --ignore tests/ app.js # 延迟重启 nodemon --delay 2 app.js

package.json 示例

json
{ "scripts": { "dev": "nodemon app.js", "dev:debug": "nodemon --inspect app.js" } }

2. live-server

简单的开发服务器,支持热重载。

bash
# 安装 npm install -g live-server # 启动服务器 live-server # 指定端口 live-server --port=8080 # 指定根目录 live-server --root=dist/ # 忽略特定文件 live-server --ignore=node_modules/

发布工具

1. np

更好的 npm 发布工具。

bash
# 安装 npm install -g np # 发布 np # 发布特定版本 np 1.2.3 # 发布到特定标签 np --tag beta # 跳过测试 np --yolo # 跳过 Git 提交 np --no-cleanup

2. semantic-release

自动化版本管理和发布。

bash
# 安装 npm install -g semantic-release # 配置 # .releaserc.json { "branches": ["main"], "plugins": [ "@semantic-release/commit-analyzer", "@semantic-release/release-notes-generator", "@semantic-release/npm", "@semantic-release/github" ] }

CI/CD 工具

1. husky

Git hooks 管理工具。

bash
# 安装 npm install -g husky # 初始化 husky install # 添加 hook husky add .husky/pre-commit "npm test" # 添加 commit-msg hook husky add .husky/commit-msg 'commitlint -E HUSKY_GIT_PARAMS'

package.json 示例

json
{ "scripts": { "prepare": "husky install" } }

2. lint-staged

对暂存的文件运行 linter。

bash
# 安装 npm install -g lint-staged # 配置 # .lintstagedrc.json { "*.js": ["eslint --fix", "git add"], "*.css": ["stylelint --fix", "git add"] }

package.json 示例

json
{ "husky": { "hooks": { "pre-commit": "lint-staged" } } }

最佳实践

1. 选择合适的工具

  • 包管理:npm-check-updates、npm-check
  • 安全:Snyk、npm audit
  • 性能:bundlephobia、cost-of-modules
  • 测试:nyc、testdouble
  • 构建:webpack、rollup
  • 开发:nodemon、live-server

2. 集成到工作流

bash
# 在 package.json 中添加脚本 { "scripts": { "check": "npm-check", "update": "ncu -u", "audit": "snyk test", "test:coverage": "nyc npm test" } }

3. 定期运行

bash
# 每周运行一次更新检查 ncu # 每次提交前运行安全审计 npm audit # 每次构建前运行代码检查 npm run lint

4. 文档化工具使用

在 README 中说明项目使用的工具:

markdown
## Development Tools This project uses the following tools: - **npm-check-updates**: Check for dependency updates - **Snyk**: Security vulnerability scanning - **nodemon**: Auto-restart development server - **webpack**: Module bundler

掌握这些 npm 生态系统工具可以显著提高开发效率和代码质量。

标签:NPM