# npm - 常用操作技巧
现在用 npm / yarn 管理构建项目已经是前端的标配了(2019-07-16)，但是目前对于 npm 可能很多还是仅限于基本的 npm i , npm run dev 操作。记录一下常用操作技巧。
# 1.基本操作
- 安装 - 常规：
npm install，简写：npm i。 - 测试 - 常规：
npm test，简写：npm t。 - 帮助 - 常规：
npm --help，简写：npm -h。 - 全局标志 - 常规：
--global，简写：-g。 - 保存为开发依赖 - 常规：
--save-dev，简写：-D。 - npm init 默认值 - 常规：
npm init --yes或npm init --force，简写：npm init -y或npm init -f
我们知道使用-save或-S来保存包，但现在这是个已经是默认值。要安装一个包而不保存它，可以使用 --no-save标志。
# 2.不太常见操作
- 精确安装指定模块版本 - 常规：
--save-optional，简写：-O
# 3.设置 npm init 属性
当运行npm init开始一个新项目时，可能会需要配置很多细节。有时为了节省时间，可以为一些字段设置默认值，如下所示：
npm config set init.author.name "rem486"
npm config set init.author.email "rem486@xx.com"
npm config set init.author.url "rem486.com"
npm config set init.license "MIT"
2
3
4
配置完了可以在终端输入 npm config edit 查看配置文件信息。
也可以编辑全局的 npm 信息，使用 npm config edit -g。
重置用户默认配置：第一行用空字符串替换配置文件，第二行用默认设置重新填充配置文件。
echo "" > $(npm config get userconfig)
npm config edit
2
重置全局默认配置
echo "" > $(npm config get globalconfig)
npm config --global edit
2
# 4.npm 脚本
脚本功能是 npm 最强大、最常用的功能之一。
npm 脚本的原理非常简单。每当执行 npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。
比较特别的是，npm run 新建的这个 Shell，会将当前目录的 node_modules/.bin 子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。
这意味着，当前目录的 node_modules/.bin 子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径。比如，当前项目的依赖里面有 Mocha，只要直接写 mocha test 就可以了。
{
"script": {
"test": "mocha test"
}
}
2
3
4
5
# 5.脚本跨平台兼容
任何在命令行上运行的代码都有兼容性问题的风险，特别是在Windows和基于unix的系统(包括Mac和Linux)之间。幸好解决方案比较简单，可以使用 cross-env 依赖包。
使用 npm i -D cross-env 将其安装为开发依赖项，然后在脚本里面任何环境变量之前加上关键字 cross-env:
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack --config build/wepack.config.js"
}
}
2
3
4
5
# 6.并行运行脚本
依次运行脚本的话，我们可以使用 && 来连接。并行运行则可以通过 concurrently (opens new window) 和 npm-run-all (opens new window)
首先通过 npm i -D concurrently 安装开发依赖，然后脚本使用如下格式进行书写：
{
"start": "concurrently \"command1 arg\" \"command2 arg\""
}
2
3
# 7.在不同目录运行脚本
有时候脚本可能放在了不同文件目录，要运行脚本就需要先导航到对应文件夹，有两种方法可以执行此操作：
- 第一种是手动 cd 到对应文件夹：
cd path/to/your/folder && npm start && cd ...
- 更优雅的方案，使用
--prefix指定路径：
npm start --prefix path/to/your/folder
# 8.延迟运行脚本，知道端口准备就绪
使用 wait-on，只有在 http://localhost:3000 启动好，才会打开 Electron 窗口
"dev": "concurrently \"cross-env BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\""
# 9.查看可用脚本
列出 package.json 文件中可用的脚本：npm run
更方便的方法：使用 ntl (Npm Task List)，先全局安装，然后在项目文件夹中运行 ntl 命令，可以获得一个可用脚本列表，并可以选择其中一个运行。
$ npm i ntl -g
$ ntl
# Npm Task List - v3.2.4
? Select a task to run:
> dev
build
deploy
2
3
4
5
6
7
# 10.钩子
npm 脚本有 pre 和 post 两个钩子。栗子：build 脚本命令的钩子就是 prebuild 和 postbuild。
{
"script": {
"prebuild": "echo I run before the build script",
"build": "cross-env NODE_ENV=production webpack",
"postbuild": "echo I run after the build script"
}
}
2
3
4
5
6
7
当执行 npm run build 的时候，就会自动按照下面的顺序进行执行。
npm run prebuild && npm run build && npm run postbuild
npm 提供一个 npm_lifecycle_event 变量，返回正在运行的脚本名称。
const TARGET = process.env.npm_lifecycle_event;
# 11.变量
npm 脚本可以使用 npm 的内部变量。
首先，通过 npm_package_ 前缀，npm 脚本可以拿到 package.json 里面的字段。栗子，下面 package.json
{
"name": "foo",
"version": "1.2.5",
"scripts": {
"view": "node view.js"
}
}
2
3
4
5
6
7
变量 npm_package_name 返回 foo，变量 npm_package_version 返回 1.2.5。
// view.js
console.log(process.env.npm_package_name); // foo
console.log(process.env.npm_package_version); // 1.2.5
2
3
在 bash 脚本，可以用 $npm_package_name 进行取值。
{
"name": "foo",
"scripts": {
"view": "echo $npm_package_name"
}
}
2
3
4
5
6
# 12.控制应用程序版本
- 手动修改
npm version加上 patch, minor, major
// 当前版本 1.0.0
npm version patch // 1.0.1
npm version minor // 1.1.0
npm version major // 2.0.0
2
3
4
5
6
7
更多详细介绍参考npm-管理项目版本号
# 13.模块调试
新开发或修改的 npm 模块，如何在项目中试验？
我们假设项目是 my-project, 需要用到一个独立的 my-utils 模块。
$ # 先去到模块目录，把它 link 到全局
$ cd path/to/my-utils
$ npm link
$
$ # 再去项目目录通过包名来 link
$ cd path/to/my-project
$ npm link my-utils
2
3
4
5
6
7
去掉 link
$ npm unlink my-utils
先使用
npm install安装过 my-utils 的话，可能会提示module is not found，先删除 package-lock.json ，然后重新npm install一次。
# 14.删除未使用的包
调试的时候，可能会需要装一些依赖，最后又没有使用。可以一键删除，前提是 package.json 里面已经移除了。
npm prune
# 15.查看包最新版本
npm dist-tag ls create-vite
# beta: 4.2.0-beta.1
# latest: 4.1.0
2
3