package.json 与 package-lock.json
两者都是项目的配置文件,声明了项目依赖的 npm 包及包的版本。
package.json
package.json 包含以下内容:
- 项目名称
- 项目版本
- 作者
- 项目许可证
- 执行命令
- 执行依赖
- 开发依赖
项目名称 | 项目版本 | 作者 | 项目许可证 | 执行命令 | 执行依赖 | 开发依赖 |
---|---|---|---|---|---|---|
name | version | author | license | scripts | dependencies | devDependencies |
这里并不是所有的内容,只是列举了一些常用的字段,详细可参考官方文档。
package-lock.json
package-lock.json 在执行 npm i 的时候生成,用来记录实际安装的 npm 包的来源和版本。可以锁定安装时的包的版本,需要上传到 git,确保大家使用的包版本一致。
dependencies 与 devDependencies 的区别
dependencies 声明执行期需要的依赖,比如 echarts、jquery、axios、vue、react。 devDependencies 声明开发时所需要的依赖,比如:gulp、webpack、jest。
tips
-
- npm i 安装依赖时使用不同的参数,依赖增加到的位置不同:
dependencies devDependencies npm i xx npm i xx --save-dev
- npm i 安装依赖时使用不同的参数,依赖增加到的位置不同:
-
- 执行 npm i 时会安装哪些依赖? 执行 npm i 时会安装 dependencies 和 devDependencies 里面的所有依赖
-
-
既然已经在 package.json 中声明了依赖,为什么还需要 package-lock.json?
- package.json 里只是声明了部分包的版本,并不是所有包。
- 我们除了需要固定大的依赖包版本,还需要固定依赖的依赖。
-
-
- 版本前的符号含义 先看一下版本号的含义:
version: a.b.c
a - 主要版本,b - 次要版本,c - 补丁版本。
符号 含义 规则 1.0.0 1.0.0 精确匹配版本 ^1.2.3 1.2.3 <= version < 2.0.0 不允许第一个非零数字(从左到右)的更新 ^0.1.2 0.1.2 <= version < 0.2.0 同上 ^1.0.0 1.0.0 <= version < 2.0.0 同上 ~1.2.3 1.2.3 <= version < 1.3.0 只更新补丁版本,不更新次要版本 ~1.0.0 1.0.0 <= version < 2.0.0 没有指定次要版本,允许更新次要版本 =1.0.0 1.0.0 <= version 小于等于当前版本 latest 获取最新版本 使用最新版本 -
- 如何锁定包的版本
- npm i --save-exact/-E
仅对 package.json 中的包生效 - 依赖中声明的版本号不加符号
仅对 package.json 中的包生效 - npm-shrinkwrap
生成锁定的依赖树文件 - 使用 yarn 代替 npm
yarn 自动生成 yarn-lock 文件
总结
这一篇提到了 yarn,后面我们来看一下 yarn 和 npm 的区别。 前端开发并不难,难的是不能坚持下去,面对困难别退缩,滴水可以穿石。关注小姐姐,一起学一学。