npm 使用指南

参考文档

NPM中文网：https://www.npmjs.com.cn/

# NPM 概述

简介

NPM（Node Package Manager，即：node包管理器）是nodeJS的一个程序包管理和分发的管理工具，NPM 完全用JavaScript写成，它可以让全世界与Web前端相关开发者共享代码，非常方便的使用各种插件、库和框架，无需再到处去搜寻需要用到的这些程序。比如现在Web前端界“家喻户晓”的：Bootstrap、jQuery、Vue、Angular、React等，以及一些优化开发流程的前端开发自动化构建工具：Grunt、Gulp、Webpack、Babel等都是可以通过NPM 非常方便地下载或更新的。

除此之外，我们也可以贡献一些自己写的框架或者插件到 NPM，分享给全世界的前端开发者，让大家都能使用你写的程序。

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

使用 NPM 有什么好处？

以前我们下载一个需要用到的程序（插件、库和框架）总是需要在搜索引擎里输入该程序的关键字，然后再在搜索出的结果中筛选出我们真正需要的程序，期间难免会误进入一些广告、钓鱼、挂木马等网站，或者下载下来的程序包含病毒、木马程序，又或者下载到的程序版本非常旧等问题。就算勉强躲过了这些，找到了程序官网所在的地址，在一页英文网站中找到适合自己计算机系统或正确版本的程序又得花上一些时间，特别是对英文基础较差的开发者来说。

我们以jQuery的下载为例来谈谈传统开发者要下载jQuery这个库的繁琐步骤：

1. 打开浏览器
2. 在搜索框内输入jquery确定搜索
3. 点击jQuery的“正确”官网链接跳转进jQuery的官网
4. 找到相应的下载按钮并点击
5. jQuery会跳转到下载页，在这里有几个版本，分别是production版（生产环境版，即压缩版）、 development（开发版，即未压缩版）以及source map（资源镜像）。除此之外，在这些链接的下方还包含了“精简”后的各种环境版本
6. 找到自己需要的版本点击下载

以上差不多就是传统的前端需要用到一个程序包的时候的一般操作步骤，如果是下载Apache等多平台的服务器端配置软件需要的步骤会更加地繁琐。

然而，对于以上操作使用npm下载来说，只需要两个步骤：

1. 打开系统命令行工具
2. 输入命令：$ npm install jquery

不仅如此，通过这种方式下载的jQuery文件是一套较为完整的jQuery架构文件，里面不仅包含了jQuery的各种场景所需版本，甚至还提供了模块化开发所需的各种JS模块文件，对于熟悉jQuery的人来说，使用这些模块最终会使得最终生成的jQuery非常的小，特别是经过gzip压缩之后。

除此之外，NPM 还能下载指定版本的程序包，比如现在我们需要下载一个支持IE8的jQuery版本（1.x版），可以这样输入命令：

$ npm install jquery@1

同理，如果需要的是v-2.x的版本还可以

$ npm install jquery@2

对于其它程序包需要下载当前大版本的最新版仍然可以用这种方式，比如要下载现在

bootstrap最常用的第三版：

$ npm install bootstrap@3

可以说是相对以往的任何方式都更加方便了。

# NPM 安装

我们已经提到，nodeJS 自带 npm，因此我们只需要安装 nodeJS 即可。

点击 前往下载 nodeJS

nodeJS下载完成后像正常软件那样进行安装即可，但路径最好选择一个比较容易查找的（盘符的根目录是最好的选择），因为我们以后可能经常都会使用到nodeJS里面的npm。

先看看 node 被安装到哪了，然后确认下版本。

$ which node
/usr/local/bin/node
$ node -v
v8.9.3

提示：window 下使用 where 指令替代 which 。

验证下安装是否成功，试试 Node REPL 。

$ node
> console.log('Hello, world!');
Hello, world!
> .help
.break    Sometimes you get stuck, this gets you out
.clear    Alias for .break
.editor   Enter editor mode
.exit     Exit the repl
.help     Print this help message
.load     Load JS from a file into the REPL session
.save     Save all evaluated commands in this REPL session to a file
> .exit

nodeJS安装完成之后检查npm是否可用，可以在命令行工具里面输入：

$ which npm
/usr/local/bin/npm
$ npm -v
5.6.0

如果结果是一串数字的版本号，那证明安装成功，npm已经可用。

在 windows 系统下，如果提示“npm不是内部或外部的命令…”，那就要进入系统设置一下环境变量了。具体操作步骤如下：

1）、桌面上右键“此电脑” -> 属性 -> 高级系统设置 -> 环境变量 -> 选择PATH -> 点击编辑

2）、获取nodeJS安装路径，将该路径添加至刚刚的PATH中即可。

注意： 用户变量与系统变量都应该做相同的操作。

更新 npm

Node 中捆绑了 npm，因此你的电脑上应该已经安装了某个版本的 npm。不过，npm 的更新比 Node 频繁多了，因此我们应该确保我们使用的是最新版本的 npm。

$ [sudo] npm install npm@latest -g

# 修复npm权限

修复npm权限 -> 更改npm全局安装路径

1、windows

npm的默认安装路径是在当前计算级用户目录下的一个隐藏文件AppData下面的文件夹里，每次要使用到我们安装程序包的一些单独的分发文件（Dist File）非常不方便，所以我们需要创建一个自定义的目录，让每次通过npm全局安装的程序包都能在这个目录下面以便于我们统一管理。

查看当前npm全局安装路径位置的命令是：

$ npm config get prefix

要设置npm的全局安装的目录有两种方法。

方法1：

打开命令行窗口，分别输入以下命令：

$ npm config set prefix "E:\npm-global"
$ npm config set cache  "E:\npm-global\cache"

第一行设置的是全局安装程序包的目录，第二行设置的是全局缓存的目录，这会让我们在下载（之前被手动删除过的程序包）或更新程序包的时候速度更加的迅速。

这里要注意盘符里的文件夹都是我们预先创建好的，盘符自己根据需要选择，文件夹名也可以根据习惯自定。

方法2：

找到npm文件夹下一个叫做npmrc的文件，用notepad++等文本编辑器打开进行编辑。

然后进行如下配置：

prefix=E:\npm-global
cache=E:\npm-global\cache

完成后保存关闭该文件，注意盘符和文件夹名是你自己的。

特别注意：

如果做了自定义全局安装的路径，也要将当前文件夹所在的路径也要添加进“系统环境变量”里，否则以后安装的一些带命令的程序包（如：cnpm、gulp、webpack、babel等）的命令都会无效。（如上配置的话，配置全局变量的路径就应该是“E:\npm-global”了）

这样一来，我们通过全局安装的程序包就会在你创建的文件夹内了。

2、macOS

当你尝试安装一个全局包的时候，你可能会收到一个EACCES错误。这表明您没有npm用于存储全局包和命令的目录的写权限。

您可以使用下列任一方式来修复这个问题：

1. 修改npm默认目录的权限（许可）
2. 将npm的默认目录修改为其他目录
3. 使用包管理器安装一个Node（包管理器会帮你处理这些）

在继续之前，你应该先备份你的电脑。

选项1：修改npm默认目录的权限（许可）

1. 找到npm目录的路径：

   $ npm config get prefix

   对于很多系统，路径会是 /usr/local。
   注意：如果路径显示/usr, 请使用方式2；否则你将把权限搞砸。

2. 将npm目录的所有者改为当前用户的名字（你的名字）：

   $ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

   上面的命令修改npm和其他工具使用的子文件夹的权限。

选项2：将npm的默认目录修改为其他目录

有些时候，你不想更改npm默认目录的所有者，因为那会导致某些问题，例如，你和其他人共享该系统。
你可以设置npm使用不同的目录。在我们的案例中，我们将使用一个主文件夹中的隐藏目录。

1. 创建一个全局安装的默认路径：

   $ mkdir ~/.npm-global

2. 配置npm到新目录的路径：

   $ npm config set prefix '~/.npm-global'

3. 打开或者新建一个~/.profile文件并添加下面这行：

   $ export PATH=~/.npm-global/bin:$PATH

4. 回到命令行，更新系统变量

   $ source ~/.profile

5. 测试：不用sudo全局地下载一个包：

   $ npm install -g jquery

6. npm 安装位置仍然在 root 用户的目录中。但因为改变了 global 包的位置，所以可以利用这一点。我们需要重新安装 npm，但这次安装在新用户自备的位置。这次也是安装最新版本的 npm。

   npm install npm -g

选项3：使用一个会解决这个问题的包管理器

如果刚在Mac OS上安装新的node，你可以选择使用 Homebrew 包管理器来避免这个问题。Homebrew刚安装好时，便用了正确的权限设置。

$ brew install node

# package.json

当一个项目的基本文件目录结构已经创建，按照现在前端开发工程师的一个习惯，都会在项目根目录下创建一个package.json 文件，触发该文件创建的命令是：

$ npm init

根据提示进行配置，每步完成按回车键确认。

通常第一个出现的配置项是name，表示当前项目的名称，名称的设置有以下五个要求：

1. 英文字符必须是全部小写的

2. 名称间不能出现空格（如：test webpack）

3. 名称不得过长
4. 不能为中文
5. 可以使用连接线（-）和下划线（_）

否则都会错误并要求重新输入。

这里再说说其它填写项的作用：

> version —— 表示配置文件的版本号。可跳过

> description —— 配置文件描述文本。可跳过可手动输入

> entry point —— 入口js文件。可跳过可手动输入

> test command —— 快捷命令设置。可跳过

> dependencies —— 依赖。可跳过，后续自动生成

> keywords —— 关键字设置。可跳过

> git repository —— git仓库。可跳过

> author —— 作者名称

> license: (ISC) —— 许可证，可跳过

当所有配置项都输入完成后按照要求输入命令 yes 即可完成配置，并在当前目录下生成一个 pakage.json 文件了。既然生成的是一个json文件，也就是说我们可以随时去手动修改我们生成的这个文件了，以后也有很多配置属性是在其它程序包的命令使用的时候帮我们自动生成的。

实际上，如果你不喜欢这样繁琐的问答生成方式可以使用更快速的生成方式：

$ npm init --yes

使用这条命令的前提是你当前项目的命名满足规范，也就是上面提到name的那五个要求。（其实哪怕平时我们不使用npm构建项目的时候，也应该有这样良好的项目命名习惯，文件命名也是提升我们项目可扩展性的一个重要要求。）

关于 pakage.json 更多的使用方式，我们会在以后的Web前端自动化构建相关的课程里讲到。就现在而言，我们只需要将其认作是一个反应项目信息的文件就好，虽说它是一个功能性文件。

# NPM 使用

1、安装程序包

npm 安装 Node.js 模块语法格式如下：

$ npm install <name> [-g] [--save-dev][--save]

语法解读：

1）、<name>：node 插件名称，比如：npm install jquery —save-dev

2）、-g：全局安装，Mac 系统下将会 “/usr/local/lib/node_modules” 目录下（ Windows 系统安装 “C:\Users\Administrator\AppData\Roaming\npm” 下 ），并且写入系统环境变量。非全局安装：将会安装在当前定位目录；全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过 require() 调用；

3）、--save： 安装生产环境需要的依赖包，会把依赖包名称添加到 package.json 文件 dependencies 键下

4）、--save-dev：安装开发环境需要的依赖包，会把依赖包名称添加到 package.json 文件 devDependencies 键下

5）、为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行 npm install，则会根据package.json下载所有需要的包，npm install --production 只下载dependencies节点的包）

提示：

--save 与 --save-dev的区别是，npm自己的文档说dependencies是运行时依赖，devDependencies是开发时的依赖。即devDependencies 下列出的模块，是我们开发时用的，比如 我们安装 js的压缩包gulp-uglify 时，我们采用的是 “npm install –save-dev gulp-uglify ”命令安装，因为我们在发布后用不到它，而只是在我们开发才用到它。dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。

另外需要补充的是：
正常使用npm install时，会下载dependencies和devDependencies中的模块，当使用npm install –production或者注明NODE_ENV变量值为production时，只会下载dependencies中的模块。

安装一个指定版本的包

只需要@后面追加版本就可以了。

$ npm install bootstrap@3

引用：

安装好之后，jqeury 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require(‘jquery’) 的方式就好，无需指定第三方包路径。

var jquery = require('jquery');

列出所有包

可以用如下命令列出所有我们安装的 包。

$ npm list [-g]

不过输出太冗长了。可以使用 –depth=0 参数来控制输出。

$ npm list [-g] --depth=0

示例

目前只安装了一个 global 包，那就是 npm 本身。所以让我们来试试其他的，安装 UglifyJS（一个 JavaScript 压缩工具 ）。我们将使用 –global 标识，可以简写成 -g。

$ npm install uglify-js -g

可以在终端中使用 uglifyjs 解析 JavaScript 文件。例如使用下面的命令可以将 example.js 转换成 example.min.js ：

$ uglifyjs example.js -o example.min.js

2、卸载程序包

要卸载通过npm安装的程序包，可以使用以下命令：

$ npm uninstall [g] <包名> [--save][--save-dev]

注意：

1. 如果安装时使用了 g （全局），卸载程时也应该加上g。
2. 如果安装时使用了 --save-dev（在开发环境中依赖程序包），卸载时也应该加上--save-dev。
3. 如果安装时使用了 --save （在生产线上环境依赖程序包），卸载时也应该加上 --save。

3、更新程序包

需要知道哪些程序包需要更新，可以使用命令

$ npm outdated -g --depth=0

由于这个检查会连接npm服务器，所以可能会有些慢，稍微等待即可。如果已经安装了淘宝镜像，那则最好的选择就是使用淘宝镜像检测更新：

$ cnpm outdated -g --depth=0

如果有软件需要更新，在输入这条命令后，如果后面返回了信息，并且发现“current”和“latest”这两列的版本号是不一样的，那就说明是可以进行更新的，如果没有返回信息，说明当前没有程序包需要更新。

当然，这个命令不需要切换文件夹路径，在任何目录下都可以输入该命令，因为该命令带有 -g 的指令。

接着对需要更新的程序包执行以下命令即可：

$ npm update [-g] <包名>

但实际上很多时候可以用以下命令来更新更为稳妥：

$ npm install [-g] <包名>

是的，就是重新安装一遍而已，由于起初已经设置了下载的catch，那重新安装一遍的速度也应该是比较快的，用淘宝镜像更是几秒内的事。

实际上，可以通过以下命令来更新全局的所有包，但在有的时候会产生超时错误，所以一般不是很推荐使用。

$ npm update -g

4、搜索程序包

$ npm search <name>

5、管理缓存

当 npm 安装一个包的时候它会维护一个副本，下次你想再次安装那个包的时候，就不用再去访问网络重新下载了。那些副本会在 home 目录 .npm 文件夹中缓存起来。

$ ls ~/.npm
_cacache            _logs
_locks              anonymous-cli-metrics.json

随着时间推移，这个目录里会有很多老的包，十分的混乱，所以时常清理下是十分有必要的。

$ npm cache clean

# 使用淘宝 NPM 镜像

由于npm是国外的服务器，在国内使用很多时候会不稳定，出现下载“假死”或速度过慢的现象（如果出现这样的情况我们可以 control + C 结束进程）。为了解决这个问题阿里集团的一个团队为npm创建了一个国内的服务器镜像——淘宝镜像（cnpm），它以10分钟为单位保持与国外npm服务器的同步频率。也就是说我们直接可以通过淘宝镜像去下载或更新我们的程序包，而不必去忍受缓慢的程序包下载速度了。

要安装淘宝镜像，需要在终端输入以下命令：

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

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [g] <包名> [--save-dev][--save]

# NPM 常用指令

• npm help：查看npm帮助
• npm list：当前目录已安装的插件
• npm root -g：查看全局目录安装目录
• npm config ls：查看配置项
• npm set/get global=true/false：设置/获取全局安装模式状态
• npm config get prefix：获取global位置
• npm install npm@latest -g 更新 npm