1，了解工程化管理核心
1.1 nodejs
理解：
在前端工程化发展中，nodejs的出现让前端开始了工程化，结束了仅静态页和切图的工作。他为前端提供了一个运行环境，让前端彻底变成了一个单独的工程，可以运行、编译、构建打包等。
版本管理：
不同的前端项目可能使用不同的nodejs版本开发，因此nodejs的版本管理，通常使用nvm（https://github.com/nvm-sh/nvm）和n（https://www.npmjs.com/package/n）。
二者区别是n是一个npm包，他必须要在node环境中才能安装运行，而nvm可以在window和mac下使用；同时多窗口使用n，全局的node版本都会跟着改变，而nvm在不同的终端窗口可以保持不同的版本。因此大部分情况下都是使用nvm来进行版本管理。
1.2 npm
理解：
npm（Node Package Manager）是主要用来进行包管理的工具。以前的项目如果用到一个插件，需要直接复制文件夹到另一个项目，但是npm将插件保存到远程仓库registry，在新项目复用的时候，直接通过npm install下载安装到当前项目的node_modules目录下进行引用。他将包的信息等都存到package.json文件中，同时该配置文件也存了一些关于项目命令等其他信息。
淘宝镜像源：
因为npm是从国外服务器下载，因此会有下载慢的问题，因此淘宝团队搭建了一个国内的镜像，每10分钟一同步。而我们开发者就可以设置淘宝镜像源来提高下载速度。
npm config set registry https://registry.npm.taobao.org
1.3 yarn
理解：
npm包管理工具存在很多问题，比如下载慢，版本管理不严格导致每台机器上的依赖库版本补丁不一致，npm嵌套关系较深等。因此会衍生出很多新的包管理工具，例如yarn。
yarn的提出主要是为了解决npm中补丁版本不一致的问题，使用yarn.lock文件固定了安装的版本号，且在安装时采用并行安装的方式，提高了依赖包的安装速度。（而后续npm也模仿他加了package-lock.json这一相同功能）
使用：
1，下载yarn： npm install -g yarn (可以用yarn -v 检测是否安装成功)
[设置淘宝镜像：yarn config set registry https://registry.npmmirror.com/ ]
2，安装依赖： yarn
3，安装具体依赖包： yarn add 包名
4，删除具体依赖包： yarn remove 包名
5，启动项目： yarn serve（比npm少了一个run）
注意：
yarn与npm不要混合使用，二者尽量只选择一个
1.4 pnpm
理解：
占用磁盘空间更小，下载速度更快，支持monorepos（解决了前端项目臃肿和分工合作的问题，支持用一个git仓库管理多个子项目，例如Babel项目也在使用），安装简单（npm i -g pnpm），替换npm和yarn的成本低。
使用：
1，安装pnpm： npm install -g pnpm
[设置淘宝镜像：pnpm set registry https://registry.npm.taobao.org ]
2，安装依赖： pnpm install
3，安装具体依赖包： pnpm add 包名
4，删除具体依赖包： pnpm remove 包名
5，启动项目： pnpm run serve
1.5 依赖包版本号
版本号理解：
每个依赖包的版本号都是1.2.3的形式，对应的意义为主版本号、次版本号、修订版本号。
最优版本理解：
默认情况npm install下载的都是最新版本，版本号不是固定的，而是最优版本。最优版本通常在版本号前面多一个 ^ 或者 ~ 符号。
符号^ ：兼容某个大版本，下载的包主版本不能变，次版本和修订版本可以随意变
符号~： 兼容某个次版本，下载包的主版本和次版本不能变，修订版本可以随意变
示例：
"element-ui": "^2.15.8",
// 版本号可以是2.15.8、2.15.7、2.14.5等等特点：
最优版本就会导致多人开发会出现多个不同的版本，但是就算使用固定版本锁死版本号，但是无法保证依赖包的依赖包还是最优版本。
2，package.json配置
必备属性：（只有两个）
name - 项目名称
version - 项目版本
描述信息：
description - 项目描述
keyword - 关键词
author - 作者
contributors - 贡献者（与作者不同，他是一个数组）
homepage - 主页地址
repository - 仓库地址
bugs - 项目bug反馈地址
funding - 资金支持方式和链接
依赖配置：
dependencies - 生产环境依赖（他下面的依赖会跟随npm包被自动下载）
devDependencies - 开发环境依赖（本地开发阶段使用到的，不会被自动下载，例如webpack、eslint、vite、babel、scss-loader等辅助工具包）
（注：当只开发项目不对外开源时，放在dependencies和devDependencies中是一样的）
peerDependencies - 同版本依赖（简单理解就是依赖包A依赖了B，依赖包C也依赖了B，而将相同的依赖写在同版本依赖里，可以保证共用同一个版本的依赖，且避免重复安装）
bundledDependencies - 捆绑依赖（使用较少。参数是一个数组）
engines - 具体环境（node和npm）版本（例如："engines": { "node": ">=8.10.3 <12.13.0", "npm": ">=6.9.0" }）
脚本配置：
scripts - 脚本入口
config - 用来定义scripts运行时的配置参数（例如："config": { "NODE_ENV": "development" }）
文件&目录：
main - 指定加载的入口文件（没提供该属性，则默认是根目录下的index.js）
browser - 定义npm包在browser环境下的入口文件
module（非官方） - 定义npm包ESM规范的入口文件，可以在browser环境和node环境使用
types（非官方） - 定义typescript的类声明文件(.d.ts)的路径
files - 指定哪些包被推送到npm服务中（参数为字符串数组）
bin - 定义在全局安装时可执行的命令（例如构建脚手架{ "bin": "cli.js" }）
发布配置：
private - true或false，防止将私有包发到npm仓库
preferGlobal（非官方） - true或false，为true表示建议你的包适合全局安装，不适合作为项目依赖本地安装
publishConfig - 发布时的配置项合集（eg：{ tag: '1.0.0', registry: 'http://xxx', access: 'publick' }）
os - 设置npm包在什么系统中使用，在什么系统中禁用（eg：{ "os": ["darwin", "linux"] } // 适用的操作系统 { "os" ["!win32"] } // 禁用的操作系统）
cpu - 和OS配置类似，更准确的限制用户的安装环境（eg："cpu" ["x64", "AMD64"] // 适用的cpu）
license - 指定软件的开源协议
MIT - 只要用户在项目副本中包含了版权声明和许可声明，就可以拿代码做任何事情，无需承担任何责任
Apache - 类似于 MIT ，同时还包含了贡献者向用户提供专利授权相关的条款
GPL - 修改项目代码的用户再次分发源码或二进制代码时，必须公布他的相关修改
第三方配置（非官方）：
typings - 与main类似，指定typescript的入口文件
eslintConfig - eslint的配置内容，更推荐配置在.eslintrc文件中
babel - 指定Babel的配置内容，更推荐配置在.babelrc文件中
unpkg - 基于CDN的前端包托管服务，用于在浏览器中直接引用和加载 npm 上发布的包
browserslist - 告知支持哪些浏览器及版本（eg："browserslist": [ "not ie < 8", "last 2 versions", "> 1%" ]）
3，package.json中的命令
npm run xx实际是运行scripts中配置的命令。
多个命令并行顺序执行，使用符号&
"scripts": {
"start": "指令一 & 指令二 & ...",
},多个命令串行（前面的成功才会执行后面），使用符号&&
"script": {
"start": "指令一 && 指令二 && ...",
},4，package-lock.json文件
概念：
之前说package.json某个依赖可能不是具体的版本，而package-lock.json则固定了每个依赖的具体版本，和每个包之间的叠层关系。他会在npm install的时候自动生成
node_modules依赖包的主要组成部分：
version - 依赖包版本号
resolved - 依赖包下载地址
intergrity - 表明完整性的hash值
dev - 该模块是否为顶级模块的依赖，或者是一个的传递依赖关系
dependencices - 依赖包的依赖包
requires - 依赖包所需要的所有依赖项
engines - 具体环境，同package.json一致文章来源：https://www.toymoban.com/news/detail-720696.html
示例：文章来源地址https://www.toymoban.com/news/detail-720696.html
"node_modules/@achrinza/node-ipc": {
"version": "9.2.2",
"resolved": "https://registry.npmmirror.com/xxc-9.2.2.tgz",
"integrity": "sha512-b90U39dx0cU......4ApNXnE3+Tuo8xxxxx==",
"dev": true,
"dependencies": {
"@node-ipc/js-queue": "2.0.3",
"event-pubsub": "4.3.0",
"js-message": "1.0.7"
},
"engines": {
"node": "8 || 10 || 12 || 14 || 16 || 17"
}
},到了这里，关于包管理工具与配置文件package.json的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
