第一层依赖与环境层node_modulespackage.jsonpackage-lock.json介绍这个文章主要是说明vue-cli的对于nodejs的环境安装以及npm的使用配置就不多说了我们将在有nodejs的环境使用npm安装好对应的依赖依赖安装的具体位置将在node_modules这个包下像pom一样展示依赖的具体的信息讲展示在package.json 与 package-lock.json 详解一、package.json文件作用项目的身份证“依赖清单”“脚本入口”声明项目需要什么、怎么运行。完整示例及逐行解释{// 1. 项目基本信息 name:my-vue-project,// 项目名称唯一标识发布到 npm 时必需version:1.0.0,// 版本号遵循语义化版本major.minor.patch// 1.0.0 → 1大版本/不兼容改动.0新功能/兼容.0bug修复description:这是一个Vue项目,// 项目描述npm 搜索时显示author:张三 zhangsanexample.com,// 作者信息license:MIT,// 开源协议类型private:true,// 防止误发布到 npm 仓库企业项目一般都是 true// 2. 工程命令 scripts:{serve:vue-cli-service serve,// npm run serve → 启动开发服务器build:vue-cli-service build,// npm run build → 打包生产环境代码lint:vue-cli-service lint,// npm run lint → 检查代码规范test:jest,// npm run test → 运行测试dev:npm run serve// 别名可以自定义任何命令},// 3. 生产依赖 dependencies:{vue:^3.2.0,// 上线后也必须有的依赖// ^3.2.0 表示 3.2.0 ≤ 版本 4.0.0axios:^1.5.0,// HTTP 请求库element-plus:^2.4.0,// UI 组件库vue-router:^4.2.0,// 路由pinia:^2.1.0// 状态管理},// 4. 开发依赖 devDependencies:{vue/cli-service:^5.0.0,// Vue CLI 构建工具只在开发时需要eslint:^8.0.0,// 代码检查工具prettier:^3.0.0,// 代码格式化工具jest:^29.0.0// 测试框架只在开发时需要},// 5. 版本范围配置 engines:{node:16.0.0,// 要求 Node.js 版本 ≥ 16npm:8.0.0// 要求 npm 版本 ≥ 8},// 6. 入口文件 main:src/main.js,// 模块入口Node.js 环境使用module:dist/index.js,// ES Module 入口打包工具使用// 7. 发布配置 files:[dist,src,*.js],// npm publish 时包含哪些文件keywords:[vue,admin,dashboard],// 关键词方便 npm 搜索repository:{type:git,url:https://github.com/xxx/my-project.git},// 代码仓库地址bugs:{url:https://github.com/xxx/my-project/issues},// issue 反馈地址homepage:https://github.com/xxx/my-project#readme// 项目主页}dependencies vs devDependencies 核心区别dependenciesdevDependencies何时需要运行时开发/构建时典型包vue、axios、element-uiwebpack、eslint、jest生产打包✅ 会打包进去❌ 不会打包进去举例Vue 框架在浏览器里需要运行ESLint 只在写代码时检查浏览器不需要npm install vue → 保存到 dependencies npm install -D webpack → 保存到 devDependencies npm install --save-dev jest → 同上版本符号详解{axios:1.5.0,// 精确版本只装 1.5.0lodash:^4.17.0,// 兼容4.17.0 ≤ 版本 5.0.0vue:~3.2.0,// 更严格3.2.0 ≤ 版本 3.3.0react:17.0.0,// 大于等于 17.0.0express:4.x,// 主版本固定4.x.x 最新webpack:*// 任意版本不推荐}^ 和 ~ 的区别版本号major.minor.patch主版本.次版本.补丁版本 ^1.2.3 允许: 1.2.3, 1.2.4, 1.3.0, 1.9.9 不允许: 2.0.0主版本变了 ~1.2.3 允许: 1.2.3, 1.2.4, 1.2.9 不允许: 1.3.0次版本变了2.0.0二、package-lock.json文件作用精确锁定依赖树中每一个包的版本和下载地址保证每次安装结果完全相同。完整示例及逐行解释{// 1. 文件元信息 name:my-vue-project,// 与 package.json 同名version:1.0.0,// 与 package.json 同版本lockfileVersion:3,// lock 文件格式版本npm v7 使用 version 3// 2. 整体依赖树 packages:{// node_modules 中每个包的信息:{// 空字符串代表项目根目录name:my-vue-project,version:1.0.0,dependencies:{vue:^3.2.0,axios:^1.5.0},devDependencies:{vue/cli-service:^5.0.0}},// 3. 具体依赖包信息 node_modules/axios:{version:1.5.0,// 精确安装的版本号resolved:https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz,// 从哪个地址下载的镜像源地址integrity:sha512-pN/7nO8I4S3JzZEvfD4F9EHG8b0Z3KxnYX5rYkPcAUlT4QcE9v5DHhUW20wR1e5/2kZzWwCT7WiuGksKQ1fog,// 文件完整性校验SHA512哈希防止下载文件被篡改peerDependencies:{},// 对等依赖如果有要求engines:{node:12.0.0}// 要求的环境版本},node_modules/axios/node_modules/follow-redirects:{// axios 依赖的 follow-redirects嵌套依赖version:1.15.3,resolved:https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz,integrity:sha512-1VzOtuEM8pC9SFU1E8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q},node_modules/vue:{version:3.2.47,resolved:https://registry.npmmirror.com/vue/-/vue-3.2.47.tgz,integrity:sha512-60188y/9Dc9WVrAZeUVSDxRQOZzy5nO2ts9jWXSTkMvHavj5EeMGlBEo/9WgU4D/mpB/2y1cXpprQ4nU3A,dependencies:{vue/compiler-dom:3.2.47,vue/runtime-dom:3.2.47// vue 依赖的其他包也会被锁定}},node_modules/vue/compiler-dom:{version:3.2.47,resolved:https://registry.npmmirror.com/vue/compiler-dom/-/compiler-dom-3.2.47.tgz,dependencies:{vue/shared:3.2.47}},node_modules/vue/runtime-dom:{version:3.2.47,dependencies:{vue/runtime-core:3.2.47,vue/shared:3.2.47}},node_modules/eslint:{// devDependencies 中的包也会被锁定version:8.55.0,resolved:https://registry.npmmirror.com/eslint/-/eslint-8.55.0.tgz,dev:true// dev: true 标记这是开发依赖}},// 4. 依赖关系旧版格式兼容保留dependencies:{// 这是 npm v6 及之前的格式新版也会保留用于兼容axios:{version:1.5.0,resolved:https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz,integrity:sha512-xxx...,requires:{follow-redirects:^1.15.0}}}}三、两个文件解决的核心问题问题1版本漂移场景package.json: axios: ^1.5.0 2024-01-01 安装: axios1.5.0 2024-03-01 安装: axios1.6.0新版本 张三1月安装: 1.5.0 ✅ 正常运行 李四3月安装: 1.6.0 ❌ 出现 bug新版本有 breaking changelock 文件解决package-lock.json 锁定: axios1.5.0 张三 → npm ci → 安装 1.5.0 ✅ 李四 → npm ci → 安装 1.5.0 ✅问题2间接依赖失控场景你只写了: dependencies: { axios: ^1.5.0 } 但 axios 自己依赖了 follow-redirects: ^1.0.0 2024-01-01 安装: follow-redirects1.0.0 ✅ 能用 2025-01-01 安装: follow-redirects2.0.0 ❌ API 变化axios 不兼容lock 文件解决package-lock.json 锁定了整个依赖树: axios1.5.0 └── follow-redirects1.15.3特定版本 间接依赖也被锁定不会乱变问题3下载源不一致场景张三用官方源: registry.npmjs.org 李四用淘宝源: registry.npmmirror.com 有时镜像同步有延迟两个源同一时刻版本可能不同lock 文件解决package-lock.json 记录了具体的 resolved 下载地址 resolved: https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz 所有人都从同一个地址下载同一份文件问题4文件被篡改风险lock 文件解决package-lock.json 记录了 integrity 哈希值 integrity: sha512-pN/7nO8I4S3JzZEvfD4F9EHG8b0Z3KxnYX5rYkPcAUlT4QcE9v5DHhUW20wR1e5/2kZzWwCT7WiuGksKQ1fog 下载后校验哈希如果文件被篡改 → 安装失败四、什么时候使用哪个命令命令读取文件行为适用场景npm installpackage.json lock按 lock 安装如果 lock 存在否则按 package.json 解析并生成 lock日常开发首次或不确定时npm cilock 文件强制需要严格按 lock 安装更快更准CI/CD、团队协作保证环境一致npm updatepackage.json按 package.json 的范围升级到最新匹配版本更新 lock想要升级依赖时npm install axios1.6.0package.json lock安装指定版本同时更新两个文件手动升级某个包五、团队协作最佳实践✅ 必须做 1. package-lock.json 提交到 git 2. 使用 npm ci 代替 npm installCI 环境 3. 所有人使用相同版本的 npm ❌ 禁止做 1. 把 package-lock.json 加入 .gitignore 2. 手动编辑 package-lock.json 3. 混合使用 npm 和 yarn各自的 lock 文件不同六、一句话总结package.json 我想要什么声明 范围 package-lock.json 我实际用了什么精确锁定 完整性校验 两者配合 团队成员 CI 服务器 生产环境装出来的依赖【完全一样】
前端框架使用vue-cli（ 第一层：依赖与环境层）
第一层依赖与环境层node_modulespackage.jsonpackage-lock.json介绍这个文章主要是说明vue-cli的对于nodejs的环境安装以及npm的使用配置就不多说了我们将在有nodejs的环境使用npm安装好对应的依赖依赖安装的具体位置将在node_modules这个包下像pom一样展示依赖的具体的信息讲展示在package.json 与 package-lock.json 详解一、package.json文件作用项目的身份证“依赖清单”“脚本入口”声明项目需要什么、怎么运行。完整示例及逐行解释{// 1. 项目基本信息 name:my-vue-project,// 项目名称唯一标识发布到 npm 时必需version:1.0.0,// 版本号遵循语义化版本major.minor.patch// 1.0.0 → 1大版本/不兼容改动.0新功能/兼容.0bug修复description:这是一个Vue项目,// 项目描述npm 搜索时显示author:张三 zhangsanexample.com,// 作者信息license:MIT,// 开源协议类型private:true,// 防止误发布到 npm 仓库企业项目一般都是 true// 2. 工程命令 scripts:{serve:vue-cli-service serve,// npm run serve → 启动开发服务器build:vue-cli-service build,// npm run build → 打包生产环境代码lint:vue-cli-service lint,// npm run lint → 检查代码规范test:jest,// npm run test → 运行测试dev:npm run serve// 别名可以自定义任何命令},// 3. 生产依赖 dependencies:{vue:^3.2.0,// 上线后也必须有的依赖// ^3.2.0 表示 3.2.0 ≤ 版本 4.0.0axios:^1.5.0,// HTTP 请求库element-plus:^2.4.0,// UI 组件库vue-router:^4.2.0,// 路由pinia:^2.1.0// 状态管理},// 4. 开发依赖 devDependencies:{vue/cli-service:^5.0.0,// Vue CLI 构建工具只在开发时需要eslint:^8.0.0,// 代码检查工具prettier:^3.0.0,// 代码格式化工具jest:^29.0.0// 测试框架只在开发时需要},// 5. 版本范围配置 engines:{node:16.0.0,// 要求 Node.js 版本 ≥ 16npm:8.0.0// 要求 npm 版本 ≥ 8},// 6. 入口文件 main:src/main.js,// 模块入口Node.js 环境使用module:dist/index.js,// ES Module 入口打包工具使用// 7. 发布配置 files:[dist,src,*.js],// npm publish 时包含哪些文件keywords:[vue,admin,dashboard],// 关键词方便 npm 搜索repository:{type:git,url:https://github.com/xxx/my-project.git},// 代码仓库地址bugs:{url:https://github.com/xxx/my-project/issues},// issue 反馈地址homepage:https://github.com/xxx/my-project#readme// 项目主页}dependencies vs devDependencies 核心区别dependenciesdevDependencies何时需要运行时开发/构建时典型包vue、axios、element-uiwebpack、eslint、jest生产打包✅ 会打包进去❌ 不会打包进去举例Vue 框架在浏览器里需要运行ESLint 只在写代码时检查浏览器不需要npm install vue → 保存到 dependencies npm install -D webpack → 保存到 devDependencies npm install --save-dev jest → 同上版本符号详解{axios:1.5.0,// 精确版本只装 1.5.0lodash:^4.17.0,// 兼容4.17.0 ≤ 版本 5.0.0vue:~3.2.0,// 更严格3.2.0 ≤ 版本 3.3.0react:17.0.0,// 大于等于 17.0.0express:4.x,// 主版本固定4.x.x 最新webpack:*// 任意版本不推荐}^ 和 ~ 的区别版本号major.minor.patch主版本.次版本.补丁版本 ^1.2.3 允许: 1.2.3, 1.2.4, 1.3.0, 1.9.9 不允许: 2.0.0主版本变了 ~1.2.3 允许: 1.2.3, 1.2.4, 1.2.9 不允许: 1.3.0次版本变了2.0.0二、package-lock.json文件作用精确锁定依赖树中每一个包的版本和下载地址保证每次安装结果完全相同。完整示例及逐行解释{// 1. 文件元信息 name:my-vue-project,// 与 package.json 同名version:1.0.0,// 与 package.json 同版本lockfileVersion:3,// lock 文件格式版本npm v7 使用 version 3// 2. 整体依赖树 packages:{// node_modules 中每个包的信息:{// 空字符串代表项目根目录name:my-vue-project,version:1.0.0,dependencies:{vue:^3.2.0,axios:^1.5.0},devDependencies:{vue/cli-service:^5.0.0}},// 3. 具体依赖包信息 node_modules/axios:{version:1.5.0,// 精确安装的版本号resolved:https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz,// 从哪个地址下载的镜像源地址integrity:sha512-pN/7nO8I4S3JzZEvfD4F9EHG8b0Z3KxnYX5rYkPcAUlT4QcE9v5DHhUW20wR1e5/2kZzWwCT7WiuGksKQ1fog,// 文件完整性校验SHA512哈希防止下载文件被篡改peerDependencies:{},// 对等依赖如果有要求engines:{node:12.0.0}// 要求的环境版本},node_modules/axios/node_modules/follow-redirects:{// axios 依赖的 follow-redirects嵌套依赖version:1.15.3,resolved:https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.3.tgz,integrity:sha512-1VzOtuEM8pC9SFU1E8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q},node_modules/vue:{version:3.2.47,resolved:https://registry.npmmirror.com/vue/-/vue-3.2.47.tgz,integrity:sha512-60188y/9Dc9WVrAZeUVSDxRQOZzy5nO2ts9jWXSTkMvHavj5EeMGlBEo/9WgU4D/mpB/2y1cXpprQ4nU3A,dependencies:{vue/compiler-dom:3.2.47,vue/runtime-dom:3.2.47// vue 依赖的其他包也会被锁定}},node_modules/vue/compiler-dom:{version:3.2.47,resolved:https://registry.npmmirror.com/vue/compiler-dom/-/compiler-dom-3.2.47.tgz,dependencies:{vue/shared:3.2.47}},node_modules/vue/runtime-dom:{version:3.2.47,dependencies:{vue/runtime-core:3.2.47,vue/shared:3.2.47}},node_modules/eslint:{// devDependencies 中的包也会被锁定version:8.55.0,resolved:https://registry.npmmirror.com/eslint/-/eslint-8.55.0.tgz,dev:true// dev: true 标记这是开发依赖}},// 4. 依赖关系旧版格式兼容保留dependencies:{// 这是 npm v6 及之前的格式新版也会保留用于兼容axios:{version:1.5.0,resolved:https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz,integrity:sha512-xxx...,requires:{follow-redirects:^1.15.0}}}}三、两个文件解决的核心问题问题1版本漂移场景package.json: axios: ^1.5.0 2024-01-01 安装: axios1.5.0 2024-03-01 安装: axios1.6.0新版本 张三1月安装: 1.5.0 ✅ 正常运行 李四3月安装: 1.6.0 ❌ 出现 bug新版本有 breaking changelock 文件解决package-lock.json 锁定: axios1.5.0 张三 → npm ci → 安装 1.5.0 ✅ 李四 → npm ci → 安装 1.5.0 ✅问题2间接依赖失控场景你只写了: dependencies: { axios: ^1.5.0 } 但 axios 自己依赖了 follow-redirects: ^1.0.0 2024-01-01 安装: follow-redirects1.0.0 ✅ 能用 2025-01-01 安装: follow-redirects2.0.0 ❌ API 变化axios 不兼容lock 文件解决package-lock.json 锁定了整个依赖树: axios1.5.0 └── follow-redirects1.15.3特定版本 间接依赖也被锁定不会乱变问题3下载源不一致场景张三用官方源: registry.npmjs.org 李四用淘宝源: registry.npmmirror.com 有时镜像同步有延迟两个源同一时刻版本可能不同lock 文件解决package-lock.json 记录了具体的 resolved 下载地址 resolved: https://registry.npmmirror.com/axios/-/axios-1.5.0.tgz 所有人都从同一个地址下载同一份文件问题4文件被篡改风险lock 文件解决package-lock.json 记录了 integrity 哈希值 integrity: sha512-pN/7nO8I4S3JzZEvfD4F9EHG8b0Z3KxnYX5rYkPcAUlT4QcE9v5DHhUW20wR1e5/2kZzWwCT7WiuGksKQ1fog 下载后校验哈希如果文件被篡改 → 安装失败四、什么时候使用哪个命令命令读取文件行为适用场景npm installpackage.json lock按 lock 安装如果 lock 存在否则按 package.json 解析并生成 lock日常开发首次或不确定时npm cilock 文件强制需要严格按 lock 安装更快更准CI/CD、团队协作保证环境一致npm updatepackage.json按 package.json 的范围升级到最新匹配版本更新 lock想要升级依赖时npm install axios1.6.0package.json lock安装指定版本同时更新两个文件手动升级某个包五、团队协作最佳实践✅ 必须做 1. package-lock.json 提交到 git 2. 使用 npm ci 代替 npm installCI 环境 3. 所有人使用相同版本的 npm ❌ 禁止做 1. 把 package-lock.json 加入 .gitignore 2. 手动编辑 package-lock.json 3. 混合使用 npm 和 yarn各自的 lock 文件不同六、一句话总结package.json 我想要什么声明 范围 package-lock.json 我实际用了什么精确锁定 完整性校验 两者配合 团队成员 CI 服务器 生产环境装出来的依赖【完全一样】
