每个前端项目中都有一个package.json文件，你看懂了吗？花几分钟重温一下这个熟悉的陌生人。如何生成package.json在项目文件夹下执行npminit-yquickgeneration。-y一直代表是。打开文件，我们看到如下信息。{"name":"package-json","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":[],"author":"","license":"ISC"}将以上字段一一引入：name包名，必填项version包版本，必填项description包描述信息，一句话介绍这个??包主包入口文件的用途。比如require('package-json')，相当于使用package的index.js。这个字段在开发npm包的时候比较常见，我们Chetuzai接触的不多。scripts包执行脚本，常用的npmstart、npmrundev、npmrunbuild都在这里注册。keywords关键字类似于description，用来介绍packageauthorpackagecreatorlicensepackageprotocol的用途，用来指定是否开源，付费与否，web项目的package.json大多数开发者都是围绕web开发工作的。来看看web项目dependencies的package.json的常用配置字段，devDependencies，private，scripts...dependencies&devDependencies面试官：请问dependencies和devDependencies的区别？简单，依赖就是生产环境的依赖。安装包时，执行npminstall-Sxxx；devDependencies是开发环境的依赖。安装包需要执行npminstall-Dxxx。生产环境和开发环境是什么意思？如果不小心在devDependencies列表中安装了react或者vue作为依赖，项目还能运行吗？就web项目而言，笔者认为dependencies和devDependencies的本质区别并不大。安装包的地方，项目可以正常构建和运行。区别主要在于语义表达。依赖往往是指在打包构建之后，依赖该包的代码会被打入到产品中，这在生产环境中是必不可少的。devDependencies是指开发构建过程中的那些工具，比如构建用的webpack，代码检查用的eslint，代码转义用的babel等，都属于开发环境依赖。它们存在的目的就是帮助我们安全方便的将开发好的代码转换成用户浏览器的可执行代码。还有一个区别，npminstall--production=true不会安装devDependencies下的依赖，只会安装dependencies的依赖。通常没有人会控制这个变量。private如果在package.json中设置了"private":true，npm将拒绝发布它。大多数web项目不需要提交到npm仓库，建议设置private为true。顺带一提，在monorepo的热潮下，大家将monorepo项目根目录的private设置为true，防止有小伙伴误将整个目录下发给scripts脚本，从而控制项目生命周期的脚本。想想你每天用的npmrundev、npmrunbuild、npmrunlint都做了什么。只需查看脚本配置即可。如果想了解团队项目的工程实现，也建议从脚本配置入手，稍微阅读一下命令对应的脚本文件。你是工程大师。脚本中需要强调的一点是命令钩子前和后。钩子可以注册命令的前置命令和后置命令。写个例子：{"scripts":{"prexxx":"echo'start~'","xxx":"echo'xxxrunning'","postxxx":"echo'end!'"}}当我们当执行npmrunxxx，你会看到如下结果。prexxx,postxxx自动执行。用途：commit前执行lint，npmrundev前自动为用户安装包等。想想还能做些什么，欢迎讨论。engines我们很难保证同事之间有一个统一的开发环境。比如不同开发者的node版本不一致，有的是8.x，有的是10.x，有的是14.x。来个新人，问一下你用的什么版本的node，累不累？我们来配置引擎"engines":{"node":">=12.10.0<15"}上面的版本是我写的，如果开发者的版本不符合要求，控制台会报错并引导用户自行纠正，避免口口相传前面介绍的非web项目的package.json中的字段同样适用。有几个对打包项目很常见且有用的属性。比如前面介绍过的main、files、binmain，包的入口文件。默认是项目根目录下的index.js。"main":"./lib/index.js"，如果你的包名是package-json，当用户代码requires('package-json')时，相当于在你的包目录index中要求./lib/.js文件。filesfiles用于确定将哪些文件发布到npm存储库。包的用户不能访问不在files中的文件，main指向的文件也必须存在于这个列表中。"files":["src","dist/*.js","types/*.d.ts"]，bin命令行工具入口。当你的包提供命令行工具时，你需要为命令行工具指定一个入口。命令名称与本地指定文件的对应关系。可以参考vue-cli-service的源码"bin":{"vue-cli-service":"bin/vue-cli-service.js"}细心的话会发现node_modules/bin我们项目下的文件文件夹里面有很多可执行文件。对于用户：本地安装包bin下的可执行文件会链接到./node_modules/.bin/；全局安装包的bin会被软链接到/usr/local/bin。dependencies&devDependencies当我们的项目作为包提供给他人使用时，开发者执行npminstall。需要注意的是，只有dependencies会作为包的依赖被安装，devDependencies会被忽略。相信大家终于可以明白什么是开发环境，什么是生产环境了。开发包需要注意不要把生产依赖误安装到devDependencies中，导致你的用户无法运行。其他建议：有工程问题，先看工程配置文件，不懂再请教同事。不然可能会被喷~关注我，别迷路
