package.json的作用
packge.json在前端工程中是一个记录文档，它作为Web工程的入口文件，通常都是软件包集合
每个前端项目中都有package.json文件，在Web工程中，最常见的配置有配置项目启动、打包命令和声明依赖的npm包，有了它就可以把项目中一切需要操作包括版本、依赖等记录起来
package的必须字段
有几个字段是package必须填写的，会在执行npm init的时候填写：
◎ name：项目名称，必需字段。
◎ version：项目版本，必需字段。
◎ main：入口文件。
◎ license：项目遵守的许可证。
◎ scripts：可运行的npm命令。
◎ keywords：关键字。
◎ author：作者。
◎ description：项目描述。
author、license、repository、bugs配置
◎ author：作者信息。
◎ license：该包或者工程需要遵守的协议。
◎ repository：一个对象配置，type说明是Git库还是svn库，URL说明该包或者工程源代码地址。
◎ bugs：指明该包或者工程的bug地址或者反馈问题的E-mail，可以指定一个或者两个，以便于author快速搜集、处理问题。
scripts配置
scripts这个配置都是可执行的脚本命令，可以配置启动项目、测试脚本等，在前端工程中是不可或缺的重要配置之一：
"scripts": {
"dev": "node index.js",
"predev": "node preIndex.js",
"postdev": "node postIndex.js"
},
这三个scripts命令都会执行，执行的顺序是predev→dev→postdev
devDependencies、dependencies配置
依赖包：npm包声明会添加到dependencies或者devDependencies中。dependencies中声明的是项目在生产环境中所必需的包。devDependencies中声明的是开发阶段需要的包，如Webpack、ESLint、Babel等，用来辅助开发。打包上线时并不需要这些包，所以要根据包的实际用途把它们声明在适当的位置。
若希望在找不到包或者安装失败时，npm包能继续运行，则可将该包放在optionalDependencies对象中。
optionalDependencies对象中的包会覆盖dependencies中同名的包，这一点需要特别注意
postcss配置
postcss是预加载器处理，可以为css3新特性加上浏览器前缀等等
"postcss": {
"plugins": {
"autoprefixer": {}
}
}
Babel配置
可以对项目中ES6—7的代码转换配置等等，大多数都是Babel编译配置
"babdel" : {
"presets": ['@babel/preset-env'],
"plugins": [...]
}
配置选项过多，请参考官方网站
sideEffects配置
该项为Webpack的辅助配置，是Webpack 4新增的一个特性，用来声明该包或模块是否包含sideEffects（副作用）
原理是Webpack能将标记为 side-effects-free 的包由 import{a} from xx 转换为 import{a}from’xx/a’，从而自动去掉不必要的模块。如果我们引入的包或模块标记了sideEffects：false，那么不管它是否有副作用，只要没有被用到，整个包或模块就会被完整地移除
bin配置
许多包都有一个或多个可执行文件，可以使用npm link命令把这些文件导入全局路径中，以便在任意目录下执行。如导入脚手架工具create-react-app的react-scripts中：
"bin": {
"react-scripts": "./bin/react-scripts.js"
}
或导入vue-cli脚手架的＠vue包中：
"bin" : {
"vue": "bin/vue.js"
}
unpkg配置
unpkg配置：npm包中的所有文件都开启了CDN服务，该CDN服务由unpkg提供
lint-staged配置
lint-staged是一个在Git暂存文件上运行linters的工具，配置后每次修改一个文件即可给所有文件执行一次lint检查，通常配合gitHooks一起使用
githooks配置
定义一个钩子，在提交（commit）之前执行ESLint检查。在执行lint命令后，会自动修复暂存区的文件。修复之后的文件并不存储在暂存区中，所以需要用git add命令将修复后的文件重新加入暂存区。在执行pre-commit命令后，如果没有错误，就会执行git commit命令：
"git-hooks" : {
"pre-commit": "lint-staged"
}
version版本记录
查看npm包的版本信息，以vue包为例
◉ 查看最新版本：npm view vue version
◉ 查看所有版本：npm view vue versions
files配置
files是一个数组配置，用来描述当把npm包作为依赖包安装时需要说明的文件列表。当npm包发布时，files指定哪些文件会被推送到npm服务器中。如果指定的是文件夹，那么该文件夹下面的所有文件都会被提交。
如果有不想提交的文件，则可以在.npmignore中说明
main、module、browser配置
main配置用来指定加载的入口文件，在Browser环境和Node环境中均可使用，
module配置：定义npm包的ESM规范的入口文件，在Browser环境和Node环境中均可使用
browser配置：npm包在Browser环境下的入口文件
这三者都是与入口文件有关，他们之间的区别在于不同的环境下加载顺序：
◎ 如果使用loader加载ESM（ES module），那么这三项配置的加载顺序是browser→module→main；如果使用require加载CommonJS模块，则加载的顺序是main→module→browser。
◎ Webpack在进行项目构建时，有一个target选项，默认为Web，即构建Web应用。如果需要编译一些同构项目，如node项目，则只需将webpack.config.js的target选项设置为node进行构建即可
◎ 如果在Node环境中加载CommonJS模块或者ESM，则只有main字段有效
publicConfig配置
一组配置值，在发布时使用。比如使用registry指定发布的地址来发布指定的tag、access（public，restricted）等配置
engines配置
日常在维护一些遗留项目时，对npm包的版本或者Node的版本可能会有特殊的要求。如果不满足条件，则可能会出现各种各样奇怪的问题。为了让项目能够“开箱即用”，可以在engines中说明具体的版本号
engines仅起到说明的作用，即使用户安装的版本不符合，也不影响依赖包的安装
jsdelivr配置
jsdelivr配置：免费的CDN服务配置。
typings配置
ts的入口文件，作用与main配置相同
standard配置
standard是一个JavaScript代码检查和优化的工具库，可以在package.json包中增加相应的配置来优化代码
browserlist配置
browserlist配置：设置浏览器的兼容情况