npm命令介绍(Node Package Manager)

文章目录

npm命令全解析

简介

npm (Node Package Manager) 是JavaScript运行时环境Node.js的默认包管理工具,为开发者提供了一种高效管理项目依赖的方式。作为世界上最大的软件注册表,npm包含了超过100万个开源包,极大地促进了JavaScript生态系统的繁荣发展。

基础命令

安装npm(npm -v检插版本)

npm随Node.js一起安装,可通过以下命令检查版本:

bash 复制代码
npm -v

初始化项目(npm init)

创建新项目时,首先需要初始化package.json文件:

bash 复制代码
npm init
# 或使用默认值快速创建
npm init -y

安装依赖包(npm install xxx、npm i xxx)

bash 复制代码
# 安装包并保存到dependencies
npm install lodash
# 简写形式
npm i lodash

# 安装指定版本
npm install [email protected]

# 安装开发依赖
npm install webpack --save-dev
# 或简写
npm i webpack -D

关于开发依赖,参考文章:npm开发依赖(仅在开发阶段需要,生产环境不需要的包)(npm install xxx --save-dev、npm i xxx -D、npm install --production)

依赖管理精解

依赖类型区分(生产环境依赖dependencies、开发环境依赖devDependencies、宿主环境依赖peerDependencies、可选依赖optionalDependencies)

json 复制代码
{
  "dependencies": {
    "react": "^17.0.2"    // 生产环境依赖
  },
  "devDependencies": {
    "webpack": "^5.52.0"  // 开发环境依赖
  },
  "peerDependencies": {
    "react": ">=16.8.0"   // 宿主环境依赖
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"  // 可选依赖,安装失败不会导致npm install失败
  }
}

版本控制策略

复制代码
"lodash": "^4.17.21"  // ^表示兼容补丁和小版本更新
"express": "~4.17.1"  // ~表示兼容补丁版本更新
"moment": "4.17.1"    // 精确版本
"webpack": ">=5.0.0"  // 大于等于指定版本

依赖更新

检查过时的包(npm outdated)
html 复制代码
npm outdated
更新特定包(npm update lodash)
html 复制代码
npm update lodash
更新所有包(npm update)
html 复制代码
npm update

脚本与自动化

自定义脚本

package.json中定义常用操作:

json 复制代码
{
  "scripts": {
    "start": "node server.js",            // 启动应用
    "dev": "nodemon server.js",           // 开发模式
    "build": "webpack --mode production", // 构建生产版本
    "test": "jest",                       // 运行测试
    "lint": "eslint ."                    // 代码检查
  }
}

运行脚本:

bash 复制代码
npm run dev
# start、test、stop、restart可以省略run
npm test

钩子脚本(prebuild、postbuild编译前后打印)

json 复制代码
{
  "scripts": {
    "prebuild": "echo '构建前执行'",  // build前自动执行
    "build": "webpack",
    "postbuild": "echo '构建后执行'"  // build后自动执行
  }
}

发布与共享

创建可发布包

注册npm账号(npm adduser)
发布包(npm publish)
发布特定标签版本(npm publish --tag beta

包版本管理

补丁版本号+1 (1.0.0 -> 1.0.1)(npm version patch)
次版本号+1 (1.0.0 -> 1.1.0)(npm version minor)
主版本号+1 (1.0.0 -> 2.0.0)(npm version major)

高级技巧

npm缓存操作

清除缓存(npm cache clean --force
验证缓存(npm cache verify)

安全审计

检查安全漏洞(npm audit)
自动修复问题(npm audit fix)
仅修复开发依赖(npm audit fix --only=dev

私有注册表配置

设置私有注册表(npm config set registry https://registry.company.com/)
恢复默认注册表(npm config set registry https://registry.npmjs.org/)

高效工作流

交互式更新依赖

交互式选择更新的依赖(npx npm-check -u

并行运行脚本(npm-run-all)

使用npm-run-all包简化多脚本运行:

json 复制代码
{
  "scripts": {
    "lint:js": "eslint .",                      // JS代码检查
    "lint:css": "stylelint '**/*.css'",         // CSS代码检查
    "lint": "npm-run-all --parallel lint:*",    // 并行运行所有lint脚本
    "dev:server": "nodemon server.js",          // 后端开发服务
    "dev:client": "webpack serve",              // 前端开发服务
    "dev": "npm-run-all --parallel dev:*"       // 并行运行所有dev脚本
  }
}

依赖可视化

安装依赖可视化工具(npm install -g npmgraph
生成依赖图(npmgraph <package-name>

最佳实践

锁定依赖版本

生成或更新package-lock.json(npm ci)
package-lock.json示例
json 复制代码
{
  "name": "project-name",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
    }
  }
}

精简安装策略

仅安装生产依赖(npm install --production
使用ci命令精确还原依赖(npm ci)

通过本文全面掌握npm命令,能够显著提升JavaScript项目开发效率和质量。从基础命令到高级技巧,npm为现代JavaScript开发提供了强大而灵活的工具链支持。

相关推荐
玄晓乌屋1 小时前
nvm for windows 安装低版本 node 丢失 npm 安装
前端·npm·node.js
SparklingTheo1 小时前
npm init、换源问题踩坑
前端·npm·node.js
F2E_Zhangmo2 小时前
webpack5启动项目报错:process is not defined
前端·vue.js·webpack·webpack5
万物得其道者成2 小时前
使用 Vue3 + Webpack 和 Vue3 + Vite 实现微前端架构(基于 Qiankun)
前端·webpack·架构
恩予哥哥2 小时前
css中盒模型有哪些
前端·javascript·css
inksci4 小时前
Vue 3 中通过 this. 调用 setup 暴露的函数
前端·javascript·vue.js
未来之窗软件服务4 小时前
monaco-editor 微软开源本地WEB-IDE-自定义自己的开发工具
开发语言·前端·javascript·编辑器·仙盟创梦ide
白白糖4 小时前
二、HTML
前端·html
子燕若水4 小时前
continue dev 的配置
java·服务器·前端
学习HCIA的小白5 小时前
关于浏览器对于HTML实体编码,urlencode,Unicode解析
前端·html