其他章节请看:
npm
npm 是什么
npm 是 node 的包管理器,绝大多数 javascript 相关的包都放在 npm 上。
所谓包,就是别人提供出来供他人使用的项目。可以是简单的几行代码,可以是 jQuery 这种类库,也可以是框架 express ,还可以是 webpack 这样的工具。
npm 用于解决前端共享问题。
以前我们需要使用 jQuery、bootstrap 等其他库,需要这么做:
- 进入 jQuery 和 bootstrap 等其他库的官网
- 将库下载到本地
- 本地引入库
npm 的作者希望简化这个过程,比如只需要执行一条命令 npm install jquery
,就能将 jquery 下载到本地。
实现的思路大概是这样:
- npm 作者发邮件给 jQuery 和 bootstrap 的作者,让他们把项目放到 npm 上
- jQuery 和 bootstrap 的作者由于不认识发邮件的人,当然会拒绝
- node 的作者缺少一个包管理器,而 npm 作者有一个包管理器,于是两人抱团取暖,node 内置了 npm
- 后来 node 火了,npm 也出名了,于是 jQuery 和 bootstrap 的作者主动把项目放到 npm 上
- 现在基于 node 开发的环境,如果需要引入什么包,只需要一个命令
在初步认识 node一文中,我们已经成功安装了 node,而 node 内置了 npm,现在我们就可以用 npm 下载一个包体验一下:
$ node --version // 查看 node 是否已成功安装
v12.18.1
$ npm --version // 查看 npm 版本
6.14.5
$ npm install jquery // {1}
npm WARN saveError ENOENT: no such file or directory, open 'D:\package.json'
...
...
+ jquery@3.6.0
added 1 package from 1 contributor and audited 1 package in 1.692s
found 0 vulnerabilities
运行 npm install jquery
(行{1})会将 jquery 下载到项目根目录的 node_modules 文件夹中。
npm 另一个意思就是 npm 网站,npm 的包就存在那里。如果可以在该网站中搜索到相应的包名(PackageName),那我们就可以通过 npm install PackageName
下载。
输入 npm install hello-world
,看看会发生什么...
package.json
Node项目中 package.json 就是项目的核心。
运行 npm init
能创建一个 package.json 文件。请看示例:
// 输入 npm init 回车,会依次让你输入关于项目的配置信息,这里一路回车
$ npm init
...
package name: (test2)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\test2\package.json:
{
"name": "test2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes
输入完 yes 后,会在项目根目录下生成一个 package.json 的文件。内容如下:
{
"name": "test2", // 名称
"version": "1.0.0", // 版本
"description": "", // 描述
"main": "index.js", // 入口文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
如果你打算发布软件包,package.json 中最重要的字段是 name 和 version,因为它们是必填;如果你不打算发布,name 和 version 则是可选的。
main 字段是程序主入口点。如果我安装了一个包(xx),然后执行 require(xx),将返回入口文件的导出模块。请看示例:
// 下载包
$ npm install underscore
// 创建文件 1.js
let _ = require('underscore')
console.log(_)
// 运行 1.js - 输出导出模块
$ node 1
[Function: _] {
VERSION: '1.12.0',
toPath: [Function: toPath],
iteratee: [Function: iteratee],
templateSettings: {
evaluate: /<%([\s\S]+?)%>/g,
...
...
// 修改 underscore 的主入口文件 node_modules\underscore\package.json
{
"main": "underscore.js",
// 改为
"main": "underscore2.js", // {1}
}
// 创建 node_modules\underscore\underscore2.js,内容如下:
exports.name = 'aaron'
// 运行 - 导出模块变成 { name: 'aaron' }
$ node 1
{ name: 'aaron' } // {2}
通过修改 underscore 的主入口文件(行{1}),最终 underscore 导出的模块是 { name: 'aaron' }
(行{2})
我们也可以通过 npm init -y
跳过向导,快速生成 package.json。
npm install
执行 npm init -y
快速生成 package.json 文件后,再运行 npm install jquery
来安装 jquery,会在 package.json 中增加 dependencies 字段。内容如下:
{
...
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
}
}
dependencies 字段声明了此项目依赖的包。
注:网上有的文章说执行 npm install jquery
,不会在 package.json 中增加 dependencies 项,可能以前的 npm 不会。笔者的 npm 是 6.14.5,参考的文档是 npm-install V6,里面说 npm install
默认将软件包保存到 dependencies 中。
此外还可以控制保存软件包的位置和方式,请看示例:
// 不保存在 dependencies
$ npm install jquery --no-save
// 保存在 devDependencies
$ npm i jquery --save-dev
执行 npm install
(不带任何参数)将安装 package.json 中列出的所有依赖包。请看示例:
{
...
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"underscore": "^1.12.0"
}
}
package.json 中列出了两个依赖,执行 npm install
将会把 jquery 和 underscore 下载到项目根目录的 node_modules 文件夹中。
当安装包或删除包,npm 都会生成或更新 packagew-lock.json 文件。npm 5 以前没有 packagew-lock.json 这个文件。笔者的 npm 是 6.14.5,运行 npm install jquery
,package.json 和 package-lock.json 的内容如下:
// package.json
{
"dependencies": {
"jquery": "^3.6.0" // {1}
}
}
// package-lock.json
{
"dependencies": {
"jquery": {
"version": "3.6.0", // {2}
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw=="
}
}
}
package-lock.json 最重要的作用是锁定版本。在 package-lock.json 中明确写明 jquery 的版本是 3.6.0,而 package.json 中的是 ^3.6.0。
其次,package-lock.json 能提升下次执行 npm install
的速度。通常一个包会依赖其他很多包(jquery是特列),以 express 为例:
$ npm install express
// package.json
{
"dependencies": {
"express": "^4.17.1"
}
}
// package-lock.json
{
// dependencies 中的都是 express 依赖的包
"dependencies": {
"accepts": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
"integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
},
"array-flatten": {
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
},
"body-parser": {
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
},
...
"express": {
"version": "4.17.1",
"resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
"integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
"requires": {
...
}
}
...
// express 依赖的包还有很多
}
}
执行 npm install express
花费 12s。因为需要先下载 express,解析 express 中的 package.json,下载里面依赖的包,接着分析依赖包并下载,如此反复执行,所以花费时间较长。而再次运行 npm install
,只需找到 package-lock.json 文件,无需循环下载、解析,而是直接从 resolved 指向的地址下载包即可。
npm uninstall
运行 npm uninstall express
,会从 package.json 文件、package-lock.json 文件,以及 node_modules 文件夹,这三个方面删除 express 相关的依赖包。
安装(npm install
)有保存软件包的位置和方式(--save、--save-dev),卸载(npm uninstall
)时也有(--save、--save-dev)。请看示例。
// 最初安装了两个包
{
...
"license": "ISC",
"dependencies": {
"jquery": "^3.6.0"
},
"devDependencies": {
"underscore": "^1.12.0"
}
}
// 卸载 jquery,dependencies 对象被删除
$ npm uninstall jquery
{
...
"license": "ISC",
"devDependencies": {
"underscore": "^1.12.0"
}
}
// 卸载 underscore,devDependencies 对象被删除
$ npm uninstall underscore --save-dev
{
...
"license": "ISC"
}
运行 npm uninstall jquery
与 npm uninstall jquery --save
的效果相同(npm 以前的版本需要指定 --save)
注:如果上面例子中执行 npm uninstall jquery --save-dev
,效果与 npm uninstall jquery
类似,也能达到卸载的目的。建议不要这样,如果要删除 devDependencies 中的包,那就使用 --save-dev
。
npm --help
通过 npm --help
可以查看 npm 命令。请看示例:
$ npm --help
Usage: npm <command>
npm install install all the dependencies in your project
npm install <foo> add the <foo> dependency to your project
npm test run this project's tests
npm run <foo> run the script named <foo>
npm <command> -h quick help on <command>
npm -l display usage info for all commands
npm help <term> search for help on <term> (in a browser)
npm help npm more involved overview (in a browser)
All commands:
access, adduser, audit, bin, bugs, cache, ci, completion,
config, dedupe, deprecate, diff, dist-tag, docs, doctor,
edit, exec, explain, explore, find-dupes, fund, get, help,
hook, init, install, install-ci-test, install-test, link,
ll, login, logout, ls, org, outdated, owner, pack, ping,
prefix, profile, prune, publish, rebuild, repo, restart,
root, run-script, search, set, set-script, shrinkwrap, star,
stars, start, stop, team, test, token, uninstall, unpublish,
unstar, update, version, view, whoami
如果需要查看特定命令的帮助,可以使用 npm 命令 --help
。例如:
$ npm init --help
npm init [--force|-f|--yes|-y|--scope]
npm init <@scope> (same as `npx <@scope>/create`)
npm init [<@scope>/]<name> (same as `npx [<@scope>/]create-<name>`)
aliases: create, innit
有快速创建 package.json 的参数 -y
。
$ npm install --help
npm install (with no args, in package dir)
npm install [<@scope>/]<pkg>
npm install [<@scope>/]<pkg>@<tag>
npm install [<@scope>/]<pkg>@<version>
npm install [<@scope>/]<pkg>@<version range>
npm install <alias>@npm:<name>
npm install <folder>
npm install <tarball file>
npm install <tarball url>
npm install <git:// url>
npm install <github username>/<github project>
aliases: i, in, ins, inst, insta, instal, isnt, isnta, isntal, add
common options: [--save-prod|--save-dev|--save-optional|--save-peer] [--save-exact] [--no-save]
可以使用 install 的别名,例如要安装 jquery:npm i jquery
npm 镜像
由于 npm 的服务器是国外的,下载包有时会很慢,所以我们有时会配置镜像。比如配置淘宝镜像,使用起来也很方便,用 cnpm 代替 npm。例如要通过镜像下载: cnpm install jquery
。
其他章节请看: