NPM命令实用使用技巧总结

本文为翻译文章，原文连接：blog.usejournal.com/npm-tips-an…

若有错误，欢迎指正～

使用技巧总结

若是你平常工做中有使用 NPM ，我相信你会喜欢这些使用技巧的。

建立项目

咱们常常使用npm init来建立项目，并按照提示输入项目信息(项目名称、做者等)，可是，若是咱们并不关心项目信息，而且保留默认值，那么咱们对 npm 请求的每条数据按 Enter 键便可。 事实上，咱们只须要使用npm init -y,这个命令就能够达到直接使用默认值信息建一个项目。

安装模块

使用npm install来安装，你可使用其简写npm i

一次性安装多个模块

无需为你要安装的每一个模块都输入一遍npm i指令，像这样：

npm i gulp-pug
npm i gulp-debug
npm i gulp-sass
复制代码

你只须要输入一行命令便可一次性批量安装模块

npm i gulp-pug gulp-debug gulp-sass
复制代码

更快捷的是，若是安装的全部模块的前缀是相同的，则能够这样安装，无需输入完整模块名

npm i gulp{-debug,-sass,-pug}
复制代码

使用一些安装标志的快捷方式

若是你想安装一些包到生产环境依赖下面，你一般是这样安装：

npm i gulp --save-prod
复制代码

更简化，你可使用-P标志，这样安装：

npm i gulp -P
复制代码

同理，开发环境下的依赖安装，你能够用-D代替--save-dev

npm i gulp -D
复制代码

当你不带任何安装标志时，npm 默认将模块做为依赖项目添加到package.json文件中。若是你想避免这样，你可使用no-save,这样安装：

npm i vue --no-save
复制代码

获取安装包信息

使用npm view xxx或npm v xxx能够查看包信息，例如：

若是你只是想看安装包最近的版本信息，你能够这样：

> npm v vue version
> 2.5.17
复制代码

若是你想获取安装包完整的版本信息列表，你可使用复数形式，例如：

> npm v vue versions
> [ '0.0.0',
  '0.6.0',
  '0.7.0',
  ...
  '2.5.15',
  '2.5.16',
  '2.5.17-beta.0',
  '2.5.17' ]
复制代码

安装指定版本安装包

若是你想安装一个不是最新版本的安装包，你能够指定某个版原本安装，如：

npm i vue@2.5.15
复制代码

鉴于记住标签比记住版本数字容易多了，你可使用用npm v命令来查到的版本信息列表里面的dist-tag来安装,好比：

npm i vue@beta
复制代码

搜索安装包

有时候你不能明确记得你曾经使用过的或者朋友推荐的包名，这种状况下，你可使用npm search从终端直接执行搜索，如：

npm search gulp debug
复制代码

或者

npm s gulp debug
复制代码

这将打印出包含说明、做者等其余信息的安装包列表。如图：

卸载包

若是你不想转到package.json文件并手动删除依赖包，则能够用如下方法删除：

npm uninstall vue
复制代码

这个命令会删除node_modules文件夹及package.json中对应的包。固然，你也能够用rm,un或者r来达到相同的效果:

npm rm vue
复制代码

若是因为某些缘由，你只想从node_modules文件夹中删除安装包，可是想在package.json中保留其依赖项，那么你可使用no-save标志，如：

npm rm vue --no-save
复制代码

依赖枚举

若是你想看一下你的项目依赖了哪些安装包，你能够这样看：

npm ls
复制代码

这个命令会将你项目的依赖列举出来，而且各个安装包的依赖也会显示出来。若是你只想看本项目的依赖，你能够这样：

npm ls --depth=0
复制代码

这样打印出来的结果就是本项目的依赖，像这样：

├── jquery@3.3.1
├── vue@2.5.17
└── yarn@1.12.3
复制代码

固然，你也能够加上g来看看你全局安装的依赖包，如：

npm ls -g -depth 0
复制代码

过时依赖枚举

大多数时候，你须要保持本地依赖的更新，你能够在项目目录下先查看一下安装包有没有版本更新，如：

npm outdate
复制代码

这个命令将会列出全部你可能有更新的过期的安装包列表，如图：

执行测试

你可使用npm run tests来执行测试用例，可是你能够更方便地用npm test或者npm t来执行。

显示可用脚本

咱们能够经过打开package.json文件来查看有哪些可执行的脚本，可是咱们还能够这样查看：

npm run
复制代码

若是在package.json中有以下配置：

"scripts": {
  "test": "jest",
  "build": "gulp build"
}
复制代码

那么执行这个命令以后，会显示如下信息：

Lifecycle scripts included in npm:
  test
    jest
available via `npm run-script`:
  build
    gulp-build
复制代码

安装Github Repo上的包

你能够直接这样安装来自Github repo上的包：

npm i https://github.com/sindresorhus/gulp-debug
复制代码

或者你能够忽略域名安装：

npm i sindresorhus/gulp-debug
复制代码

打开安装包的Github主页

你固然能够直接谷歌搜索，而后找到对应的包连接打开，可是你还能够这样：

npm repo create-react-app
复制代码

有不须要安装的包，又想看下其 github 主页的，能够这样打开。

列出全部NPM环境的可用变量

你可使用这个命令来列出全部NPM环境的可用变量：

npm run env | grep npm_
复制代码

执行后，将会打印出这样的信息：

npm_config_fetch_retry_maxtimeout=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_config_sso_type=oauth
.
.
.
复制代码

这样变量的用处就是，能够在脚本中使用它们，还能够建立本身的变量。

建立本身的NPM可用变量

你能够在package.json中添加新的 key 来建立本身的npm变量，能够是任何 key ，我更喜欢将全部的npm变量都放在一个config中，这样看起来比较清晰：

"config": {
  "build_folder":"./dist"
}
复制代码

你添加了以后，从新执行npm run env | grep npm_，就能看到如下信息：

npm_package_config_build_folder=./dist
npm_config_fetch_retry_maxtimeout=60000
npm_config_tag_version_prefix=v
npm_config_strict_ssl=true
npm_config_sso_type=oauth
.
.
.
复制代码

默认状况下，npm会重命名你的变量，给其加上前缀npm_package，并将其结构保留在package.json文件中，即变为config_build_folder。

在npm脚本中使用npm变量

你能够看到可用变量的完整列表，若是你想使用这些变量中的任何值，就能够在package.json中使用了，如：

"scripts": {
  "build": "gulp build --dist $npm_package_config_build_folder"
}
复制代码

当你执行npm run build的时候，实际执行的是这样：

gulp build --dist ./dist
复制代码

以上就是一些我最爱的平常工做中用到的命令，若有更多，欢迎来告诉我～

最后

• 欢迎加我微信(winty230)，拉你进技术群，长期交流学习...
• 欢迎关注「前端Q」,认真学前端，作个有专业的技术人...