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 --save命令自动添加依赖到文件（或者使用简写的参数 -S）。
• devDependencies：仅在开发和测试环节中需要依赖的包，通过npm install --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