npm(Node Package Manager)是JavaScript世界中最流行的包管理器,掌握npm的使用对前端开发至关重要。
东巴文(db-w.cn) 认为:包管理器就像代码的图书馆,能让你轻松使用别人写好的代码,也能分享自己的代码给全世界。善用包管理器,站在巨人的肩膀上开发。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>npm基础 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.npm-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.npm-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
.command-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.command-table th,
.command-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.command-table th {
background: #667eea;
color: white;
}
.command-table code {
background: #f8f9fa;
padding: 2px 6px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<h1>npm基础</h1>
<h2>npm概述</h2>
<div class="npm-demo">
<h3>什么是npm?</h3>
<p><strong>npm</strong> 是Node.js的默认包管理器,用于安装、共享和管理JavaScript代码包。</p>
<ul>
<li><strong>包仓库:</strong> 拥有世界上最大的软件包注册表</li>
<li><strong>命令行工具:</strong> 用于安装和管理包</li>
<li><strong>包管理:</strong> 管理项目依赖和版本</li>
<li><strong>脚本运行:</strong> 运行项目脚本命令</li>
</ul>
</div>
<h2>安装和配置</h2>
<div class="npm-demo">
<h3>安装npm</h3>
<div class="code-block">
<pre>
# npm随Node.js一起安装
# 检查Node.js版本
node -v
# 检查npm版本
npm -v
# 更新npm到最新版本
npm install -g npm@latest
# 更新npm到指定版本
npm install -g npm@8.0.0
# 配置npm镜像源
npm config set registry https://registry.npmmirror.com
# 查看当前镜像源
npm config get registry
# 恢复官方镜像源
npm config set registry https://registry.npmjs.org
# 查看npm配置
npm config list
# 查看全局安装路径
npm root -g
# 查看全局安装包
npm list -g --depth=0
</pre>
</div>
</div>
<h2>package.json文件</h2>
<div class="npm-demo">
<h3>初始化项目</h3>
<div class="code-block">
<pre>
# 初始化项目
npm init
# 快速初始化(使用默认值)
npm init -y
# 使用交互式初始化
npm init
# package.json示例
{
"name": "my-project",
"version": "1.0.0",
"description": "我的项目",
"main": "index.js",
"scripts": {
"start": "node index.js",
"test": "jest",
"build": "webpack --mode production"
},
"keywords": ["html", "css", "javascript"],
"author": "你的名字",
"license": "MIT",
"dependencies": {
"express": "^4.18.2"
},
"devDependencies": {
"webpack": "^5.88.0"
}
}
</pre>
</div>
</div>
<h2>安装包</h2>
<div class="npm-demo">
<h3>安装命令</h3>
<div class="code-block">
<pre>
# 安装包
npm install package-name
# 简写
npm i package-name
# 安装指定版本
npm install package-name@1.2.3
# 安装最新版本
npm install package-name@latest
# 安装开发依赖
npm install --save-dev package-name
# 简写
npm i -D package-name
# 全局安装
npm install -g package-name
# 安装package.json中的所有依赖
npm install
# 安装生产环境依赖
npm install --production
# 安装可选依赖
npm install --save-optional package-name
# 安装精确版本
npm install --save-exact package-name
# 安装包并添加到bundleDependencies
npm install --save-bundle package-name
</pre>
</div>
</div>
<h2>更新和卸载</h2>
<div class="npm-demo">
<h3>更新包</h3>
<div class="code-block">
<pre>
# 查看过期的包
npm outdated
# 更新包
npm update package-name
# 更新所有包
npm update
# 更新到最新版本(可能破坏版本约束)
npm install package-name@latest
# 更新全局包
npm update -g package-name
# 查看包的最新版本
npm view package-name version
# 查看包的所有版本
npm view package-name versions
</pre>
</div>
</div>
<div class="npm-demo">
<h3>卸载包</h3>
<div class="code-block">
<pre>
# 卸载包
npm uninstall package-name
# 简写
npm un package-name
# 卸载开发依赖
npm uninstall --save-dev package-name
# 卸载全局包
npm uninstall -g package-name
# 清理缓存
npm cache clean --force
# 验证缓存
npm cache verify
</pre>
</div>
</div>
<h2>常用命令速查表</h2>
<table class="command-table">
<thead>
<tr>
<th>命令</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>npm init</code></td>
<td>初始化项目</td>
</tr>
<tr>
<td><code>npm install</code></td>
<td>安装依赖</td>
</tr>
<tr>
<td><code>npm update</code></td>
<td>更新依赖</td>
</tr>
<tr>
<td><code>npm uninstall</code></td>
<td>卸载依赖</td>
</tr>
<tr>
<td><code>npm run</code></td>
<td>运行脚本</td>
</tr>
<tr>
<td><code>npm list</code></td>
<td>查看已安装的包</td>
</tr>
<tr>
<td><code>npm outdated</code></td>
<td>查看过期的包</td>
</tr>
<tr>
<td><code>npm search</code></td>
<td>搜索包</td>
</tr>
<tr>
<td><code>npm view</code></td>
<td>查看包信息</td>
</tr>
<tr>
<td><code>npm cache</code></td>
<td>管理缓存</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>npm是前端开发必备的包管理工具。掌握package.json的配置、依赖管理、版本控制等知识,能高效管理项目依赖,提高开发效率。
</div>
</div>
</body>
</html>
npm脚本是在package.json中定义的命令,可以简化常见的开发任务。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>npm脚本 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.script-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.script-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>npm脚本</h1>
<h2>脚本配置</h2>
<div class="script-demo">
<h3>基本脚本</h3>
<div class="code-block">
<pre>
{
"scripts": {
// 开发服务器
"start": "live-server",
"dev": "webpack serve --mode development",
// 构建
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
// 测试
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
// 代码检查
"lint": "eslint src/**/*.js",
"lint:fix": "eslint src/**/*.js --fix",
// 格式化
"format": "prettier --write src/**/*.{js,css,html}",
// 清理
"clean": "rm -rf dist",
// 部署
"deploy": "gh-pages -d dist",
// 组合脚本
"prebuild": "npm run clean",
"postbuild": "npm run deploy"
}
}
</pre>
</div>
</div>
<h2>运行脚本</h2>
<div class="script-demo">
<h3>运行命令</h3>
<div class="code-block">
<pre>
# 运行脚本
npm run script-name
# 运行start脚本(可省略run)
npm start
# 运行test脚本(可省略run)
npm test
# 运行install脚本(可省略run)
npm install
# 传递参数
npm run build -- --mode production
# 并行运行脚本
npm-run-all --parallel build lint test
# 顺序运行脚本
npm-run-all --sequential clean build deploy
# 使用npx运行本地安装的包
npx webpack --version
</pre>
</div>
</div>
<h2>生命周期脚本</h2>
<div class="script-demo">
<h3>生命周期钩子</h3>
<div class="code-block">
<pre>
{
"scripts": {
// prepare: 发布前执行
"prepare": "npm run build",
// preinstall: 安装前执行
"preinstall": "echo '准备安装'",
// postinstall: 安装后执行
"postinstall": "echo '安装完成'",
// prestart: start前执行
"prestart": "npm run build",
// start: 启动命令
"start": "node server.js",
// poststart: start后执行
"poststart": "echo '服务器已启动'",
// pretest: test前执行
"pretest": "npm run lint",
// test: 测试命令
"test": "jest",
// posttest: test后执行
"posttest": "echo '测试完成'",
// prebuild: build前执行
"prebuild": "npm run clean",
// build: 构建命令
"build": "webpack",
// postbuild: build后执行
"postbuild": "npm run optimize"
}
}
</pre>
</div>
</div>
<h2>跨平台脚本</h2>
<div class="script-demo">
<h3>跨平台兼容</h3>
<div class="code-block">
<pre>
{
"scripts": {
// 使用cross-env设置环境变量
"build": "cross-env NODE_ENV=production webpack",
// 使用rimraf删除目录(跨平台)
"clean": "rimraf dist",
// 使用copyfiles复制文件(跨平台)
"copy": "copyfiles -f src/index.html dist",
// 使用mkdirp创建目录(跨平台)
"mkdir": "mkdirp dist",
// 使用concurrently并行运行
"dev": "concurrently \"npm run server\" \"npm run watch\"",
// 使用wait-on等待服务启动
"test:e2e": "wait-on http://localhost:3000 && cypress run"
},
"devDependencies": {
"cross-env": "^7.0.3",
"rimraf": "^5.0.1",
"copyfiles": "^2.4.1",
"mkdirp": "^3.0.1",
"concurrently": "^8.2.0",
"wait-on": "^7.0.1"
}
}
</pre>
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>npm脚本是自动化开发流程的利器。合理配置脚本,能简化常见任务,提高开发效率。注意跨平台兼容性,使用cross-env、rimraf等工具。
</div>
</div>
</body>
</html>
除了npm,还有其他流行的包管理器,如Yarn和pnpm,各有特点。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他包管理器 - 东巴文</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
.manager-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 15px 0;
border-radius: 10px;
}
.manager-demo h3 {
color: #667eea;
margin-bottom: 10px;
}
.code-block {
background: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
overflow-x: auto;
margin: 10px 0;
}
.compare-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.compare-table th,
.compare-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.compare-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>其他包管理器</h1>
<h2>Yarn</h2>
<div class="manager-demo">
<h3>Yarn概述</h3>
<p><strong>Yarn</strong> 是Facebook开发的包管理器,旨在解决npm的一些问题,如安装速度和一致性。</p>
<ul>
<li><strong>快速:</strong> 并行安装包,缓存机制</li>
<li><strong>安全:</strong> 使用校验和验证包完整性</li>
<li><strong>可靠:</strong> 锁文件确保安装一致性</li>
<li><strong>离线模式:</strong> 缓存包支持离线安装</li>
</ul>
</div>
<div class="manager-demo">
<h3>Yarn命令</h3>
<div class="code-block">
<pre>
# 安装Yarn
npm install -g yarn
# 初始化项目
yarn init
# 安装所有依赖
yarn
# 或
yarn install
# 安装包
yarn add package-name
# 安装开发依赖
yarn add --dev package-name
# 安装全局包
yarn global add package-name
# 更新包
yarn upgrade package-name
# 卸载包
yarn remove package-name
# 运行脚本
yarn run script-name
# 运行脚本(简写)
yarn script-name
# 查看包信息
yarn info package-name
# 清理缓存
yarn cache clean
# 检查许可证
yarn licenses list
</pre>
</div>
</div>
<h2>pnpm</h2>
<div class="manager-demo">
<h3>pnpm概述</h3>
<p><strong>pnpm</strong> 是快速、节省磁盘空间的包管理器,使用硬链接和符号链接管理依赖。</p>
<ul>
<li><strong>节省空间:</strong> 所有项目共享同一份依赖</li>
<li><strong>快速:</strong> 链接操作比复制快</li>
<li><strong>严格:</strong> 只能访问package.json中声明的依赖</li>
<li><strong>安全:</strong> 避免幽灵依赖问题</li>
</ul>
</div>
<div class="manager-demo">
<h3>pnpm命令</h3>
<div class="code-block">
<pre>
# 安装pnpm
npm install -g pnpm
# 初始化项目
pnpm init
# 安装所有依赖
pnpm install
# 安装包
pnpm add package-name
# 安装开发依赖
pnpm add --save-dev package-name
# 安装全局包
pnpm add --global package-name
# 更新包
pnpm update package-name
# 卸载包
pnpm remove package-name
# 运行脚本
pnpm run script-name
# 查看包信息
pnpm info package-name
# 清理缓存
pnpm store prune
# 查看存储状态
pnpm store status
</pre>
</div>
</div>
<h2>包管理器对比</h2>
<table class="compare-table">
<thead>
<tr>
<th>特性</th>
<th>npm</th>
<th>Yarn</th>
<th>pnpm</th>
</tr>
</thead>
<tbody>
<tr>
<td>安装速度</td>
<td>中等</td>
<td>快</td>
<td>最快</td>
</tr>
<tr>
<td>磁盘空间</td>
<td>多</td>
<td>多</td>
<td>少</td>
</tr>
<tr>
<td>锁文件</td>
<td>package-lock.json</td>
<td>yarn.lock</td>
<td>pnpm-lock.yaml</td>
</tr>
<tr>
<td>幽灵依赖</td>
<td>存在</td>
<td>存在</td>
<td>不存在</td>
</tr>
<tr>
<td>离线模式</td>
<td>支持</td>
<td>支持</td>
<td>支持</td>
</tr>
<tr>
<td>Plug'n'Play</td>
<td>不支持</td>
<td>支持</td>
<td>不支持</td>
</tr>
<tr>
<td>monorepo支持</td>
<td>workspaces</td>
<td>workspaces</td>
<td>workspaces</td>
</tr>
</tbody>
</table>
<h2>选择建议</h2>
<div class="manager-demo">
<h3>如何选择?</h3>
<ul>
<li><strong>npm:</strong> Node.js默认包管理器,无需额外安装,适合大多数项目</li>
<li><strong>Yarn:</strong> 更快的安装速度,更好的离线支持,适合大型项目</li>
<li><strong>pnpm:</strong> 节省磁盘空间,严格的依赖管理,适合monorepo项目</li>
</ul>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示:</strong>选择包管理器要根据项目需求和团队习惯。npm是最通用的选择,Yarn和pnpm在特定场景下有优势。建议团队统一使用同一种包管理器。
</div>
</div>
</body>
</html>
完成本章学习后,请尝试回答以下问题:
选择题: 以下哪个命令用于安装开发依赖?
填空题: npm初始化项目的命令是____。
简答题: package.json文件中的scripts字段有什么作用?如何运行脚本?
实践题: 创建一个npm项目,完成以下操作:
应用题: 比较npm、Yarn和pnpm的优缺点,为不同类型的项目选择合适的包管理器。