蓁祎家进步中

# npm、yarn、package等

返回：前端

# npm基础语法

npm install (with no args, in package dir)
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>
npm install <tarball file>
npm install <tarball url>
npm install <folder>

alias: npm i
common options: [-S|--save|-D|--save-dev|-O|--save-optional] [-E|--save-exact] [--dry-run]
1
2
3
4
5
6
7
8
9
10
11

安装包，默认会安装最新的版本

npm install gulp
1

安装指定版本

npm install gulp@3.9.1
1
  • -S, --save 安装包信息将加入到 dependencies（生产阶段的依赖）
npm install gulp --save 或 npm install gulp -S
1

package.json 文件的 dependencies 字段：

"dependencies": {
    "gulp": "^3.9.1"
}
1
2
3
  • -D, --save-dev 安装包信息将加入到 devDependencies（开发阶段的依赖），所以开发阶段一般使用它
npm install gulp --save-dev 或 npm install gulp -D
1

package.json 文件的 devDependencies 字段：

"devDependencies": {
    "gulp": "^3.9.1"
}
1
2
3
  • -O, --save-optional 安装包信息将加入到 optionalDependencies（可选阶段的依赖）
npm install gulp --save-optional 或 npm install gulp -O
1

package.json 文件的 optionalDependencies 字段：

"optionalDependencies": {
    "gulp": "^3.9.1"
}
1
2
3
  • -E, --save-exact 精确安装指定模块版本
npm install gulp --save-exact 或 npm install gulp -E
1

输入命令 npm install gulp -ES，留意 package.json 文件的 dependencies 字段，以看出版本号中的^消失了

"dependencies": {
    "gulp": "3.9.1"
}
1
2
3
  • 本地安装（local）
npm install gulp
1
  • 全局安装（global）,使用 -g 或 --global
npm install gulp -g
1

# npm uninstall 卸载模块

基础语法

npm uninstall [<@scope>/]<pkg>[@<version>]... [-S|--save|-D|--save-dev|-O|--save-optional]

aliases: remove, rm, r, un, unlink
1
2
3
  • 如卸载开发版本的模块
npm uninstall gulp --save-dev
1

# npm update 更新模块

基础语法

npm update [-g] [<pkg>...]
1

# npm outdated 检查模块是否已经过时

基础语法

npm outdated [[<@scope>/]<pkg> ...]
1

此命令会列出所有已经过时的包，可以及时进行包的更新

# npm ls 查看安装的模块

基础语法

npm ls [[<@scope>/]<pkg> ...]

aliases: list, la, ll
1
2
3

查看全局安装的模块及依赖

npm ls -g
1

# npm init 在项目中引导创建一个 package.json 文件

安装包的信息可保持到项目的 package.json 文件中，以便后续的其它的项目开发或者他人合作使用，也说 package.json 在项目中是必不可少的。

npm init [-f|--force|-y|--yes]
1

# npm help 查看某条命令的详细帮助

基础语法

npm help <term> [<terms..>]
1

例如输入 npm help install，系统在默认的浏览器或者默认的编辑器中打开本地 nodejs 安装包的文件/nodejs/node_modules/npm/html/doc/cli/npm-install.html

npm help install
1

# npm root 查看包的安装路径

输出 node_modules 的路径

npm root [-g]
1

# pm config 管理 npm 的配置路径

基础语法

npm config set <key> <value> [-g|--global]
npm config get <key>
npm config delete <key>
npm config list
npm config edit
npm get <key>
npm set <key> <value> [-g|--global]
1
2
3
4
5
6
7

例如我在公司内网，因为公司的防火墙原因，无法完成任何模块的安装，这个时候设置代理可以解决

npm config set proxy=http://xxx
1

又如国内的网络环境问题，某官方的 IP 可能被和谐了，幸好国内有好心人，搭建了镜像，此时我们简单设置镜像

npm config set registry="http://r.cnpmjs.org"
1

也可以临时配置，如安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org
1

# npm cache 管理模块的缓存

基础语法

npm cache add <tarball file>
npm cache add <folder>
npm cache add <tarball url>
npm cache add <name>@<version>

npm cache ls [<path>]

npm cache clean [<path>]
1
2
3
4
5
6
7
8

最常用命令无非清除 npm 本地缓存

npm cache clean
1

# npm start 启动模块

基础语法

npm start [-- <args>]
1

该命令写在 package.json 文件 scripts 的 start 字段中，可以自定义命令来配置一个服务器环境和安装一系列的必要程序，如

"scripts": {
    "start": "gulp -ws"
}
1
2
3

# npm stop 停止模块

基础语法

npm stop [-- <args>]
1

# npm restart 重新启动模块

基础语法

npm restart [-- <args>]
1

# npm test 测试模块

基础语法

npm test [-- <args>]
npm tst [-- <args>]
1
2

该命令写在 package.json 文件 scripts 的 test 字段中，可以自定义该命令来执行一些操作，如

"scripts": {
"test": "gulp release"
},
1
2
3

此时在 cmd 中输入 npm test 命令相当于执行 gulpfile.js 文件自定义的 release 命令。

# yarn

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具

# 升级Yarn 2，摆脱node_modules

TIP

node项目中最臭名昭著的莫过于node_modules文件夹，
这个糟糕的结构动辄使你的文件数目增加几万甚至几十万，无论是安装还是删除，都要消耗大量时间，并且占据大量inode结点，我们随便进入一个react项目文件夹，看一下由于有node_modules会使你的项目中的文件个数变成多少

yarn的理念是，想体验2代，只能在具体项目中体验，无法全局安装，所以，先进入项目，执行：

Updating to the latest versions

yarn set version stable

yarn set version latest
1
2
3

Installing the latest build fresh from master

yarn set version from sources

# Similarly, specific PRs can be installed using the --branch flag:
yarn set version from sources --branch 1211
1
2
3
4

# Upgrading a dependency

yarn up [package]
yarn up [package]@[version]
yarn up [package]@[tag]
1
2
3

# Installing all the dependencies

yarn
yarn install
1
2

# Adding a dependency

yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
1
2
3

# Adding a dependency to different categories of dependencies

yarn add [package] --dev  # dev dependencies
yarn add [package] --peer # peer dependencies
1
2

# pnpm

  • 11、通过npm安装
npm install -g pnpm
1
  • 12、使用HomeBrew安装
brew install pnpm
1
  • 21、安装完成后配置镜像
# 获取镜像信息
pnpm get registry

# 金科镜像地址：http://128.196.0.125:9000
# 金科内部需使用私有镜像：http://128.196.0.125:9000/repository/npm_Public_group_bgdtcenter
pnpm set regisrry https://registry.npm.taobao.org
1
2
3
4
5
6
  • 31、（可选）修改默认安装包的位置
pnpm config set store-dir E:/xxx
1

# 与npm常用命令对比

npm命令 pnpm等价命令 含义
npm install pnpm install 安装全部依赖（别名pnpm i)
npm install 包名 pnpm add (-D) 包名 安装指定包
~ pnpm add sax 保存到dependencies
~ pnpm add -D sax 保存到devDependencies
~ pnpm add -O sax 保存到optionalDependencies
~ pnpm add sax@next 安装next tag
~ pnpm add sax@3.0.0 安装指定版本3.0.0
~ pnpm up 遵循package.json指定范围更新所有的依赖
~ pnpm up --latest 更新所有依赖项，此操作会忽略package.json指定的范围
~ pnpm up foo@2 将foo更新到v2上的罪行版本
~ pnpm up "@babel/" 更新@babel范围内的所有依赖
npm uninstall 包名 pnpm remove 包名 移除指定包名
npm run 脚本 pnpm 脚本 运行脚本

# 升级版本

pnpm add -g pnpm to update
1