# 一、初始化一个 package.json
npm init 手动配置
npm init -y 使用默认配置
# 1.1 各参数说明
- name 是项目的名称 (必须)
- version 是当前项目的版本号 (必须)
- description 是描述信息,很多时候是作为项目的基本描述 (发布到 npm 上的简介);
- author 是作者相关信息(发布时用到)
- license 是开源协议(发布时用到)
private 属性:
private 属性记录当前的项目是否是私有的;
当值为 true 时,npm 是不能发布它的,这是防止私有项目或模块发布出去的方式;
main 入口文件,前端项目中如果使用 webpack 配置了入口文件则该配置失效。
main 主要作用是,当我们把包发布到 npm 上去的时候,别人下载后,引入的是哪个文件就是在这里指定的。
例如:包名称是 utils-format
main 配置是: “main”: “main.js”
则 const format = require(‘utils-format’) 引入的实际是 main.js
{
"name": "npmdemo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private":true, //是否是私有的
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
2
3
4
5
6
7
8
9
10
11
12
# 1.2 dependencies devDependencies 属性
dependencies
属性是指定无论开发环境还是生成环境都需要依赖的包;
通常是我们项目实际开发用到的一些库模块;
devDependencies
一些包在生成环境是不需要的,比如 webpack、babel 等;
这个时候我们会通过 npm install xxx --save-dev,将它安装到 devDependencies 属性中;
但是对于 前端 项目来说,意义并不大,因为 webpack 在打包的时候,从入口文件开始查找并生成依赖树,如果文件存在于依赖树中,那么它还是会被打包的。
真正的意义:
在我们开发服务器的时候,或者开发一个共享出去的包工具的时候(发布到 npm 上),别人在安装你这个工具的时候,它则是根据这两个属性来的。
疑问:那么在生成环境如何保证不安装这些包呢?
生成环境不需要安装时,我们需要通过
npm install --production 来安装文件的依赖;
# 1.3 版本管理问题
我们在写 Vue 项目的时候,经常能够看到某些依赖的版本号前面有一个 ~ 或者 ^
,那么这两个符号到底是什么意思呢?
npm 的包通常需要遵从 semver 版本规范:
semver 规范:semver (opens new window)
npm semver:npm sermver 规范 (opens new window)
semver 版本规范是 X.Y.Z:
- X 主版本号(major):当你做了不兼容的 API 修改(可能不兼容之前的版本);
- Y 次版本号(minor):当你做了向下兼容的功能性新增(新功能增加,但是兼容之前的版本);
- Z 修订号(patch):当你做了向下兼容的问题修正(没有新功能,修复了之前版本的 bug);
我们这里解释一下 ^和~的区别:
- ^x.y.z:表示 x 是保持不变的,y 和 z 永远安装最新的版本;
- ~x.y.z:表示 x 和 y 保持不变的,z 永远安装最新的版本;
# 1.4 engines 属性
engines 中译为 引擎
engines 属性用于指定 Node 和 NPM 的版本号;
在安装的过程中,会先检查对应的引擎版本,如果不符合就会报错;
事实上也可以指定所在的操作系统 "os" : [ "darwin", "linux" ]
,只是很少用到;
例:
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
2
3
4
# 1.5 browserlist 属性
- 用于配置打包后的 JavaScript 浏览器的兼容情况,参考;
- 否则我们需要手动的添加 polyfills(补丁)来让支持某些语法;
- 也就是说它是为 webpack 等打包工具服务的一个属性
例:
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
2
3
4
5
# 二、npm install 命令
安装 npm 包分两种情况:
- 全局安装(global install): npm install yarn -g;
- 项目(局部)安装: npm install
全局安装
- 全局安装是直接将某个包安装到全局:
- 比如 yarn 的全局安装:
- npm install yarn -g
但是很多人对全局安装有一些 误会 :
- 通常使用 npm 全局安装的包都是一些工具包:yarn、webpack 等;
- 并不是类似于 axios、express、koa 等库文件;
- 所以全局安装了之后并不能让我们在所有的项目中使用 axios 等库;
那全局安装有什么用呢?
全局安装一般不会安装普通的包,如axios、express
等,一般安装的都是工具包,比如yarn、webpack、gulp
之类的,安装之后会生成对应的可执行文件的(.exe
),并且会自动配置环境变量的。
这里推荐一手yarn,具体差别看: yarn 和 npm 的区别 (opens new window)
npm 或 yarn 切换为国内镜像可查看我的这边文章:Yarn 和 NPM 国内镜像(淘宝镜像) (opens new window)
# 2.1 安装开发和生产依赖
npm install axios
npm i axios
2
# 2.2 开发依赖
npm install webpack --save-dev
npm install webpack -D
npm i webpack –D
2
3
# 2.3 根据 package.json 中的依赖包
npm install
# 三、npm install 原理解析
很多朋友之前应该已经会了 npm install <package>
,但是你是否思考过它的内部原理呢?
- 执行 npm install 它背后帮助我们完成了什么操作?
- 我们会发现还有一个成为 package-lock.json 的文件,它的作用是什么?
- 从 npm5 开始,npm 支持缓存策略(来自 yarn 的压力),缓存有什么作用呢?
这是 coderwhy 大神总结出来的一幅原理图:
# 四、package-lock.json
package-lock.json 文件解析:
name
:项目的名称;version
:项目的版本;lockfileVersion
:lock 文件的版本;requires
:使用 requires 来管理子依赖;dependencies
:项目的依赖- 当前项目依赖 axios,但是 axios 依赖 follow-redireacts;所以安装
axios
的时候,会连带安装follow-redireacts
- 当前项目依赖 axios,但是 axios 依赖 follow-redireacts;所以安装
- axios 中的属性如下:
version
表示实际安装的 axios 的版本;resolved
用来记录下载的地址,registry 仓库中的位置;requires
记录当前模块的依赖;integrity
用来从缓存中获取索引,再通过索引去获取压缩包文件;
示例文件:
# 五、npm 其他常用命令
强制删除 node_modules
并重新安装:rm \-rf node_momdules && npm install
(windows 不支持)
查看缓存路径:npm config get cache
卸载某个依赖包(效果都是一样的):
npm uninstall package
npm uninstall package --save-dev
npm uninstall package -D
强制重新 build
npm rebuild
清除缓存
npm cache clean
npm 的命令其实是非常多的:
- https://docs.npmjs.com/cli-documentation/cli
- 更多的命令,可以根据需要查阅官方文档
# 六、cnpm 工具
由于一些特殊的原因,某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包。
查看 npm 镜像:npm config get registry
我们可以直接设置 npm 的镜像:npm config set registry https://registry.npm.taobao.org
但是对于大多数人来说(比如我),并不希望将 npm 镜像修改了:
- 第一,不太希望随意修改 npm 原本从官方下来包的渠道;
- 第二,担心某天淘宝的镜像挂了或者不维护了,又要改来改去;
这个时候,我们可以使用 cnpm,并且将 cnpm 设置为淘宝的镜像:
npm install \-g cnpm \--registry=https://registry.npm.taobao.org
# 七、npx 工具
npx 是 npm5.2 之后自带的一个命令。
npx 的作用非常多,但是比较常见的是使用它来调用项目中的某个模块的指令。
我们以 webpack 为例:
- 全局安装的是 webpack5.1.3
- 项目安装的是 webpack3.6.0
- 如果我在终端执行 webpack --version 使用的是哪一个命令呢?
- 显示结果会是 webpack 5.1.3,事实上使用的是全局的,为什么呢?
- 原因非常简单,在当前目录下找不到 webpack 时(没有自动注册环境变量),就会去全局找,并且执行命令;
如何解决这个问题呢?
使用项目(局部)的 webpack,常见的是两种方式:
方式一:明确查找到 node_module 下面的 webpack
在终端中使用如下命令(在项目根目录下):./node_modules/.bin/webpack \--version
方式二:在 scripts 定义脚本,来执行 webpack;
修改 package.json 中的 scripts:npm run webpack
"scripts": {
"webpack": "webpack --version"
}`
2
3
方式三:使用 npx
npx webpack \--version
npx 的原理非常简单,它会到当前目录的 node_modules/.bin 目录下查找对应的命令;