manlili blog

Npm使用

发表于 | 分类于

定位

npm的全称是Node Package Manager，也就是node的包管理工具，具体使用场景如下：
(1)允许用户从NPM服务器下载别人编写的第三方包到本地使用。
(2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
(3)允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

由于新版的nodejs已经集成了npm，所以安装node的时候也把npm安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。命令如下，出现版本提示表示安装成功:

1
npm -v

使用 npm 命令安装模块

学安装前需要先去npm官网，大致的浏览下有哪些模块包，为后面讲解做准备
安装语法如下：

1
npm install 模块名字

下面去npm官网里面随便找一个包进行下载，比如vue的下载地址,按照里面的英文描述，可以在右边找下vue下载额方法

1
npm install vue

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

全局安装与本地安装

安装区别

npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g而已。
比如

1
2
npm install express      # 本地安装
npm install express -g   # 全局安装

使用区别

本地安装
(1)将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
(2)可以通过 require() 来引入本地安装的包。

全局安装
(1)将安装包放在 /usr/local 下或者你 node 的安装目录。
(2)可以直接在命令行里使用。

查看已安装的包

(1) 找到node_modules文件夹在里面直接查看
(2) 使用命令查看

1
$ npm ls -g

使用 npm 命令卸载模块

命令如下：

1
$ npm uninstall 模块名

使用 npm 命令更新模块

命令如下：

1
$ npm update 模块名

使用 npm 命令搜索模块

命令如下：

1
$ npm search 模块名

package.json

定义

package.json 位于模块的目录下，用于定义包的属性。

主要字段说明

name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫 express，然后用户安装它，然后require(“express”)。
keywords - 关键字

举例

接下来让我们来看下 vue 包的 package.json 文件，位于 node_modules/vue/package.json 内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
{
  "_args": [
    [
      {
        "raw": "vue",
        "scope": null,
        "escapedName": "vue",
        "name": "vue",
        "rawSpec": "",
        "spec": "latest",
        "type": "tag"
      },
      "F:\\manlili"
    ]
  ],
  "_from": "vue@latest",
  "_id": "vue@2.1.10",
  "_inCache": true,
  "_location": "/vue",
  "_nodeVersion": "6.9.1",
  "_npmOperationalInternal": {
    "host": "packages-12-west.internal.npmjs.com",
    "tmp": "tmp/vue-2.1.10.tgz_1484673441093_0.458372725173831"
  },
  "_npmUser": {
    "name": "yyx990803",
    "email": "yyx990803@gmail.com"
  },
  "_npmVersion": "3.10.8",
  "_phantomChildren": {},
  "_requested": {
    "raw": "vue",
    "scope": null,
    "escapedName": "vue",
    "name": "vue",
    "rawSpec": "",
    "spec": "latest",
    "type": "tag"
  },
  "_requiredBy": [
    "#USER"
  ],
  "_resolved": "https://registry.npmjs.org/vue/-/vue-2.1.10.tgz",
  "_shasum": "c9235ca48c7925137be5807832ac4e3ac180427b",
  "_shrinkwrap": null,
  "_spec": "vue",
  "_where": "F:\\manlili",
  "author": {
    "name": "Evan You"
  },
  "bugs": {
    "url": "https://github.com/vuejs/vue/issues"
  },
  "dependencies": {},
  "description": "Reactive, component-oriented view layer for modern web interfaces.",
  "devDependencies": {
    "babel-core": "^6.9.0",
    "babel-eslint": "^7.1.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-istanbul": "^3.0.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.2.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-flow-vue": "^1.0.0",
    "buble": "^0.14.0",
    "chromedriver": "^2.21.2",
    "codecov.io": "^0.1.6",
    "cross-spawn": "^5.0.1",
    "de-indent": "^1.0.2",
    "es6-promise": "^4.0.5",
    "eslint": "^3.10.1",
    "eslint-config-vue": "^2.0.1",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-flowtype": "^2.16.0",
    "eslint-plugin-jasmine": "^2.1.0",
    "eslint-plugin-vue": "^1.0.0",
    "flow-bin": "^0.33.0",
    "he": "^1.1.0",
    "http-server": "^0.9.0",
    "jasmine": "^2.5.2",
    "jasmine-core": "^2.5.2",
    "karma": "^1.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.0.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.4",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-safari-launcher": "^1.0.0",
    "karma-sauce-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.0",
    "karma-webpack": "^1.7.0",
    "lodash": "^4.17.1",
    "nightwatch": "^0.9.9",
    "nightwatch-helpers": "^1.2.0",
    "phantomjs-prebuilt": "^2.1.1",
    "rollup": "^0.36.1",
    "rollup-plugin-alias": "^1.2.0",
    "rollup-plugin-babel": "^2.4.0",
    "rollup-plugin-buble": "^0.14.0",
    "rollup-plugin-flow-no-whitespace": "^1.0.0",
    "rollup-plugin-replace": "^1.1.0",
    "rollup-watch": "^2.5.0",
    "selenium-server": "2.53.1",
    "typescript": "^2.0.9",
    "uglify-js": "^2.6.2",
    "webpack": "^1.13.2",
    "weex-js-runtime": "^0.17.0-alpha4",
    "weex-vdom-tester": "^0.1.3"
  },
  "directories": {},
  "dist": {
    "shasum": "c9235ca48c7925137be5807832ac4e3ac180427b",
    "tarball": "https://registry.npmjs.org/vue/-/vue-2.1.10.tgz"
  },
  "files": [
    "dist/vue.js",
    "dist/vue.min.js",
    "dist/vue.runtime.js",
    "dist/vue.runtime.min.js",
    "dist/vue.common.js",
    "dist/vue.runtime.common.js",
    "src",
    "types/index.d.ts",
    "types/options.d.ts",
    "types/plugin.d.ts",
    "types/vnode.d.ts",
    "types/vue.d.ts"
  ],
  "gitHead": "994aee4f869d68a00c3b9d87daa9c8d84623ac42",
  "homepage": "https://github.com/vuejs/vue#readme",
  "keywords": [
    "vue"
  ],
  "license": "MIT",
  "main": "dist/vue.runtime.common.js",
  "maintainers": [
    {
      "name": "yyx990803",
      "email": "yyx990803@gmail.com"
    }
  ],
  "name": "vue",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/vuejs/vue.git"
  },
  "scripts": {
    "bench:ssr": "npm run build:ssr && NODE_ENV=production node benchmarks/ssr/renderToString.js && NODE_ENV=production VUE_ENV=server node benchmarks/ssr/renderToStream.js",
    "build": "node build/build.js",
    "build:ssr": "npm run build -- vue.runtime.common.js,vue-server-renderer",
    "build:weex": "npm run build -- weex-vue-framework,weex-template-compiler",
    "dev": "TARGET=web-full-dev rollup -w -c build/config.js",
    "dev:cjs": "TARGET=web-runtime-cjs rollup -w -c build/config.js",
    "dev:compiler": "TARGET=web-compiler rollup -w -c build/config.js",
    "dev:ssr": "TARGET=web-server-renderer rollup -w -c build/config.js",
    "dev:test": "karma start build/karma.dev.config.js",
    "dev:weex": "TARGET=weex-framework rollup -w -c build/config.js",
    "dev:weex:compiler": "TARGET=weex-compiler rollup -w -c build/config.js",
    "flow": "flow check",
    "install:hooks": "ln -fs ../../build/git-hooks/pre-commit .git/hooks/pre-commit",
    "lint": "eslint src build test",
    "release": "bash build/release.sh",
    "release:weex": "bash build/release-weex.sh",
    "sauce": "SAUCE=true karma start build/karma.sauce.config.js",
    "test": "npm run lint && flow check && npm run test:types && npm run test:cover && npm run test:e2e -- --env phantomjs && npm run test:ssr",
    "test:cover": "karma start build/karma.cover.config.js",
    "test:e2e": "npm run build -- vue.min.js && node test/e2e/runner.js",
    "test:sauce": "npm run sauce -- 0 && npm run sauce -- 1 && npm run sauce -- 2",
    "test:ssr": "npm run build:ssr && jasmine JASMINE_CONFIG_PATH=test/ssr/jasmine.json",
    "test:types": "tsc -p ./types/test/tsconfig.json",
    "test:unit": "karma start build/karma.unit.config.js",
    "test:weex": "npm run build:weex && jasmine JASMINE_CONFIG_PATH=test/weex/jasmine.json"
  },
  "typings": "types/index.d.ts",
  "unpkg": "dist/vue.js",
  "version": "2.1.10"
}

创建模块

创建模块，package.json 文件是必不可少的。我们可以使用 NPM 生成 package.json 文件，生成的文件包含了基本的结果
命令如下：

1
npm init

然后根据提示一步一步输入，直到输入“yes”代表生成package.json完毕。
如下图所示：
图
接下来我们可以使用以下命令在 npm 资源库中注册用户
命令如下：

1
npm adduser

根据提示填写自己的信息，看到如下结果
图
接下来我们就用以下命令来发布模块

1
npm publish

如果你以上的步骤都操作正确，你就可以跟其他模块一样使用 npm 来安装。

版本号

使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，这里简单介绍一下。
语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。
(1)如果只是修复bug，需要更新Z位。
(2)如果是新增了功能，但是向下兼容，需要更新Y位。
(3)如果有大变动，向下不兼容，需要更新X位。
版本号有了这个保证后，在申明第三方包依赖时，除了可依赖于一个固定版本号外，还可依赖于某个范围的版本号。例如”argv”: “0.0.x”表示依赖于0.0.x系列的最新版argv。

使用淘宝 NPM 镜像

大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
淘宝 NPM 镜像是一个完整 npmjs.org 镜像，你可以用此代替官方版本(只读)，同步频率目前为 10分钟 一次以保证尽量与官方服务同步。
你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

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

1
cnpm install [name]

请我喝杯果汁吧！