Vue系列教程（23）- npm小结

1. 引言

通过前面的章节，我们基本把Vue的内容过了一遍了，现在拿到一个项目能达到读懂的状态 ，博客文章列表如下，有兴趣的同学可以参阅：

• 《Vue系列教程（01）- 前端发展史》
• 《Vue系列教程（02）- Vue环境搭建、项目创建及运行》
• 《Vue系列教程（03）- Vue开发利器VsCode》
• 《Vue系列教程（04）- VsCode断点调试》
• 《Vue系列教程（05）- 基础知识快速补充（html、css、js）》
• 《Vue系列教程（06）- Vue调试神器（vue-devtools）》
• 《Vue系列教程（07）- Vue第一个程序（MVVM模式的引入）》
• 《Vue系列教程（08）- 基本语法》
• 《Vue系列教程（09）- 事件绑定》
• 《Vue系列教程（10）- Model数据内容双向绑定》
• 《Vue系列教程（11）- 组件详解》
• 《Vue系列教程（12）- Axios异步通信》
• 《Vue系列教程（13）- 计算属性（computed）》
• 《Vue系列教程（14）- 插槽（slot）》
• 《Vue系列教程（15）- 事件内容分发（$emit）》
• 《Vue系列教程（16）- 模块打包器（webpack）》
• 《Vue系列教程（17）- 路由（vue-router）》
• 《Vue系列教程（18）- 集成UI框架（ElementUI）》
• 《Vue系列教程（19）- 嵌套路由（ElementUI）》
• 《Vue系列教程（20）- 参数传递（:to）》
• 《Vue系列教程（21）- 自定义404页面&路由模式》
• 《Vue系列教程（22）- 路由钩子》

在前面的文章，我们都使用到了npm，并没有文章专门的讲述，本文专门的来详细讲解。

2. npm详解

2.1 什么是npm

npm是一个包管理器（Package Manager）。

• npm 最初它只是被称为Node Package Manager，用来作为Node.js的包管理器。
• 随着其它构建工具(webpack、browserify)的发展，npm已经变成了 “the package manager for JavaScript”
• 它用来安装、管理和分享JavaScript包，同时会自动处理多个包之间的依赖。

2.2 安装与升级npm

• 安装方式：新版的Node.js已经集成了npm，所以安装了Node.js就相当于安装了npm，下载安装地址 https://nodejs.org/en/download/
• 升级方式（使用命令）：npm install npm -g

2.3 国内cnpm

因为使用npm下载依赖包时，网络会很慢，所以在使用npm安装JS包之前建议先更改npm的镜像。解决方案是是配置 npm 的国内镜像站点为：https://registry.npm.taobao.org。

• 方法一：在系统的HOME目录新建.npmrc文件并添加 registry = https://registry.npm.taobao.org
• 方法二：你可以使用淘宝定制的cnpm命令行工具代替默认的npm:，如下：

npm install -g cnpm --registry=https://registry.npm.taobao.org
//之后即可使用cnpm来安装包
cnpm install <包>

2.4 包安装方式

npm 的包安装分为本地安装（local）、全局安装（global）两种。

2.4.1 本地local安装

进入项目目录，然后执行如下命令：

npm install <包>      # 本地安装
# 或者
npm i <包>

这样会将安装包放在./node_modules 下（运行npm 命令时所在的目录），如果没有node_modules目录，会在当前执行 npm命令的目录下生成 node_modules目录。

当然可以通过 require() 来引入本地安装的包。

2.4.2 全局global安装

可以直接在命令行里使用，这是使用全局安装的主要原因，命令如下：

npm install <包> -g   # 全局安装

将安装包放在 /usr/local 下或者你 node 的安装目录。

使用下面的命令来查看全局的包安装的位置：

npm prefix -g

2.4.3 兼容本地和全局

如果你希望具备两者功能（本地安装和全局安装的功能），则需要在两个地方安装它或使用 npm link。

npm link的功能是在本地包和全局包之间创建符号链接。我们说过使用全局模式安装的包不能直接通过require 使用,但通过npm link 命令可以打破这一限制。

比如我们将 express安装到了全局环境，使用下面的命令可以将其链接到本地环境：

npm link express

使用 npm link命令还可以将本地的包链接到全局。使用方法是在包目录( package.json 所在目录)中运行npm link 命令。

如果你的项目不再需要该模块，可以在项目目录内使用npm unlink命令，删除符号链接。

像gem 或 pip 总是以全局模式安装，使包可以供所有的程序使用，而 npm 默认会把包安装到当前目录下。这反映了 npm 不同的设计哲学。如果把包安装到全局，可以提高程序的重复利用程度,避免同样的内容的多份副本，但坏处是难以处理不同的版本依赖。

2.5 package.json

① 当你的项目需要依赖多个包时，推荐使用 package.json，其优点为：

• 它以文档的形式规定了项目所依赖的包
• 可以确定每个包所使用的版本
• 项目的构建可以重复，在多人协作时更加方便

② 创建package.json文件的方式（文件中必须包含name 和 version）：

• 手动创建
• 通过 npm init 命令生成遵守规范的 package.json文件

③ package.json 可以指定依赖包，其中有两种依赖方式，（当然你也可以在文件中手动添加依赖）：

• dependencies: 在生产环境中需要依赖的包。通过npm install <packge> --save命令自动添加依赖到文件（或者使用简写的参数 -S）。
• devDependencies：仅在开发和测试环节中需要依赖的包，通过npm install <packge> --save-dev命令自动添加依赖到文件（或者使用简写的参数-D）。

如果其他人也需要这个项目，只需要把这个 package.json文件给他，然后进行简单的 npm install即可。

2.6 npm 脚本

参考：npm scripts 使用指南 - 阮一峰的网络日志

2.6.1 npm run

package.json文件有一个scripts字段，可以用于指定脚本命令，供npm直接调用。

"scripts": {
  "lint": "jshint **.js",
  "test": "mocha test/"
}

npm run lint可以运行脚本中的lint命令。npm run test可以运行脚本中的test命令。

npm run命令会自动在环境变量$PATH添加node_modules/.bin目录，所以scripts字段里面调用命令时不用加上路径，这就避免了全局安装NPM模块。

2.6.2 npm start

start和test属于特殊命令，可以省略run：

npm start 
npm test

如果仅仅使用npm run会列出scripts属性下所有的命令：

npm run

2.7 发布包

在发布之前,首先需要让我们的包符合 npm 的规范，npm 有一套以 CommonJS 为基础包规范，但与 CommonJS并不完全一致，其主要差别在于必填字段的不同。通过使用 npm init可以根据交互问答产生一个符合标准的 package.json。

npm init 运行示例：

$ npm init
name: (node) test
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /tmp/node/package.json:
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
Is this ok? (yes)

该文件就是一个符合npm规范的package.json文件。这里的index.js作为包的接口。

详情如下：

# 创建帐号：
npm adduser
#测试是否取得帐号：
npm whoami
#发布
npm publish
#更新包：修改 version字段，再重新发布
#取消发布：
npm unpublish

2.8 命令总结

2.8.1 查看命令帮助

npm help <某命令>

2.8.2 列出各命令

npm -l

2.8.3 查看安装信息

安装信息和它们的依赖

//全局安装信息
npm ls -g
//列出当前项目中的包
npm ls

2.8.4 卸载包

npm uninstall <包名>

2.8.5 更新包

//更新当前项目中安装的某个包
npm update <包名>
//更新当前项目中安装的所有包
npm update
//更新全局安装的包
npm update <包名> -g

2.8.6 搜索包

npm search <关键字>

2.8.7 列出npm的配置

npm config list -l

2.8.8 列出bin目录

npm bin

2.8.9 设置默认配置

使用 npm set命令用来设置环境变量。

也可以用它来为npm init设置默认值，这些值会保存在~/.npmrc文件中。

$ npm set init-author-name 'Your name'
$ npm set init-author-email 'Your email'
$ npm set init-author-url 'http://yourdomain.com'
$ npm set init-license 'MIT'

2.8.10 更改全局安装目录

使用npm config命令可以达到此目的。

npm config set prefix <目录>

或者手动在~/.npmrc文件中进行配置：

prefix = /home/yourUsername/npm

更改目录后记得在系统环境变量 PATH中添加该路径：

# .bashrc 文件
export PATH=~/npm/bin:$PATH

2.9 多版本管理器

Node.js 的社区开发了多版本管理器，用于在一台机器上维护多个版本的 Node.js实例，方便按需切换。Node多版本管理器(Node Version Manager，nvm)是一个通用的叫法，它目前有许多不同的实现。这里使用visionmedia/n。n 是一个十分简洁的 Node 多版本管理器。

如果已经安装好npm则可以简单的使用 npm install -g n来安装n。事实上，n并不需要 Node.js 驱动，它只是bash脚本；我们可以在 https://github.com/visionmedia/n 下载它的代码，然后使用 make install命令安装。

n的常用命令：

# 查看帮助 
n --help
# 安装 6.9.5版本的nodejs。 
# 通过 n 获取的 Node.js 实例都会安装在 /usr/local/n/versions/ 目录中（看情况吧）
n 6.9.5
# 列出已经安装的 Node.js 。结果中 * 表示默认版本
n
# 版本切换，与安装node.js一样
n 6.9.5
# 指明使用某版本的 node.js 执行某脚本(比如 script.js)
n use 6.9.5 script.js

• PREFIX=$CUSTOM_LOCATION make install； 自定义n的安装路径（避免使用sudo）
• 自定义node.js的安装路径(通过n安装)；通过设置环境变量export N_PREFIX=$HOME
• 自定义 source。（镜像站点）
• 自定义 架构(architecture)
• 如果使用n切换了node.js的版本后，npm没有正确运行，通过运行相关脚本解决。（见 n: working-with-npm）

详细用法见 ： n: Node version management

注意：n 无法管理通过其他方式安装的 Node.js 版本实例(如官方提供的安装包、发行版软件源、手动编译)，也就说无法管理不是用 n 安装的node.js。

• n 不支持在Windows上使用：“Unfortunately n is not supported on Windows yet”。
• GNVM 是一个简单的 Windows 下 Node.js 多版本管理器。

2.10 npm模块安装机制

参考：npm 模块安装机制简介 - 阮一峰的网络日志