skip to content
headImg Xuer's Blog

npm常用命令参数使用

npm命令系列···

前言

在我们前端开发过程中,很多时候需要使用第三方工具包,大大简化了我们的开发,而其中很常用的依赖包管理工具就是 npm了,接下来就来了解下这个命令常见的使用吧!

安装(install)

npm install [-g] [package-name] [--save | --save-dev]

这个命令用于安装指定的安装包,

  • package-name 参数指定了要安装的包的名字;
  • -g 参数表示安装在系统全局;
  • --save 参数表示安装的时候同时将依赖包版本写进 package.json 文件中的 dependencies字段中;
  • --save-dev 参数表示安装的时候同时将依赖包版本写进 package.json 文件中的 devDependencies字段中;

举例说明

1. 当前路径下有package.json文件,且当中有dependencies字段

npm install

会把在 package.json 文件中的dependencies字段中所有的依赖包都安装在本目录下,而且会安装匹配版本正则的最新版

(本示例只说明常用的,类似devDependencies字段和peerDependencies字段等,不常用请自行了解…)

2. 当前路径下安装 fanyi 包(一个命令行翻译工具)

npm install fanyi

执行完这个命令后,当前文件夹多了一个 node_modules 的文件夹,里边存放着fanyi的依赖文件

3. 全局安装 fanyi

npm install fanyi -g

如果不加 -g 的话,fanyi 这个命令只能在fanyi的安装路径下使用,加了-g后,可以在终端的任意目录执行fanyi命令。

4. 安装指定版本的 fanyi

npm install [email protected]

5. 将安装的依赖包版本信息写在package.json文件中的dependencies字段中

npm install fanyi --save

更新(update)

npm update [package-name] [-g] [--save]

在项目中,如果发现用的第三方依赖包太旧,需要更新的话,可以使用update参数,会下载package.json中版本号正则匹配的最新版

参数和npm install的参数性质一样。

举例说明

1. 更新本目录下的所有依赖包

npm update

执行命令后,该目录下所有的依赖包都会根据 package.json 中的规则走一遍,下载最新版本的依赖包。

注意

如果有更新,只会更新到 node_modules 里,package.json中的依赖信息不会变, 要想同步更新到 package.json 文件里,需要加 --save 参数。

2. 更新指定依赖包

npm update fanyi

卸载(uninstall)

npm uninstall package-name [--save]

install一样,不做过多解释。

查看本地安装列表(list)

npm list [-g] [--depth Number]

可以查看本地安装了哪些依赖包。

  • -g 参数表示查看全局的
  • --depth Number 表示列出几层的依赖包(看下边例子)

举例说明

1. 列出本目录下安装的依赖包有哪些

npm list

默认会以树状图将本目录所有依赖显示出来。 如图所示 ![npm-list-depth]({% if site.isProd %}{{site.cdnPrefix}}{% else %}{{site.baseurl}}{%endif%}/img/in-post/post-npm/npm-list.png)

2. 只展示一层依赖包

npm list --depth 0

如图所示 ![npm-list-depth]({% if site.isProd %}{{site.cdnPrefix}}{% else %}{{site.baseurl}}{%endif%}/img/in-post/post-npm/npm-list-depth.png)

查看依赖包信息(info)

npm info package-name [versions | 其他可用字段]

举例说明

npm info fanyi

如图所示 ![npm-info]({% if site.isProd %}{{site.cdnPrefix}}{% else %}{{site.baseurl}}{%endif%}/img/in-post/post-npm/npm-info.png)

未完待续…