package.json文件配置说明

1、什么是package.json

package.json文件是Node.js项目中的一个描述文件，执行npm init命令初始化项目后，在项目的根目录下自动生成该文件。package.json包含了项目的配置信息以及项目所需的各种模块，使用npm install（简写：npm i）命令后会自动根据package.json下载所需的模块。基本信息如下：

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": { }
}

2、package.json的属性说明

• name：名称
• version：版本
• description：描述
• main：npm包项目的主要入口文件，必须的
• module：打包需要的入口文件
• typings：TypeScript 的入口文件
• files: 发布package时，控制哪些文件会发布上去，如：
  
  "files": ["src","dist/*.js","types/*.d.ts"]
• gitHooks：代码质量检查，如：
  
  "gitHooks": {"pre-commit": "lint-staged","commit-msg": "node scripts/verify-commit-msg.js"}
• scripts：启动脚本，一般较长的命令可以设置脚本启动，详情请看2.1
• repository：git仓库所在位置，如：
  
  "repository": {"type": "git","url": "git+https://github.com/ForeverS2C"}
• keywords：关键字
• author：作者
• license：开源协议
• bugs：bug地址
• homepage：主页
• devDependencies：项目依赖，详情请看2.2
• config：设置一些用于npm包的脚本命令会用到的配置参数
• peerDependencies：其他依赖包，详情请看2.3
• engines：指定项目所需要的node.js版本，如：
  
  "engines": {"node": ">=8.9.1","npm": ">=5.5.1","yarn": ">=1.3.2"}
• browserslist：支持的浏览器，如：
  
  "browserslist": ["last 3 Chrome versions","last 3 Firefox versions","Safari >= 10","Explorer >= 11","Edge >= 12","iOS >= 10","Android >= 6"]

2.1、scripts

scripts可以简单的理解为：自定义脚本命令，在命令行中通过执行npm run+变量来执行这段脚本

• 原理：

  使用npm run script执行脚本的时候都会创建一个shell，然后在shell中执行指定的脚本。这个shell会将当前项目的可执行依赖目录（node_modules/.bin）添加到环境变量path中，当执行之后之后再恢复原样。也就是说脚本命令中的依赖名会直接找到node_modules/.bin下面的对应脚本，而不需要加上路径。

• 使用：
  
  npm run + 变量名称
  
  如上图中，即可用npm run dev || npm run start || npm start来启动项目

• 四个可以简写的脚本执行命令
  
  npm start === npm run start
  
  npm stop === npm run stop
  
  npm test === npm run test
  
  npm restart === npm run stop && npm run restart && npm run start

2.2、dependencies和devDependencies

执行npm i的时候会自动将两者引入的依赖下载到node_modules下。这两者的区别就在于项目开发和运行时，如何安装所需要的依赖。我们的项目分为生产环境和开发环境，一般说的“项目上线”，就是打包开发环境下的代码发布到生产环境的这个过程。简单的说：

dependencies------生产环境

devdependencies------开发环境

在开发的时候，只需要考虑哪种依赖（模块）是开发的时候需要？还是上线的时候需要？或者两者都需要，比如引入Vue时，两者都需要，我们可以使用npm i vue -save-dev,再比如引入webpack，该依赖只需开发环境下打包使用，线上不需要，所以我们可以使用npm i webpack -save-dev

常用的命令有：

npm install module-name -save   自动把模块和版本号添加到dependencies部分
npm install module-name -save-dev   自动把模块和版本号添加到devdependencies部分

注意：

• '-save'可以简称为：-S
• '-save-dev'可以简称为：-D

2.3、peerDependencies

devDependencies和dependencies相似，如果你经常封装插件、使用一些ui组件库，自然对peerDependencies就不会陌生了。

• 问题的产生：
  
  在项目结构中，你引入了一个父类的包（A），当你需要引入类似父类下的一个子类包（B）时，是做不到的，因为node只会在项目的node_modules文件夹中找B，并不会先找到A，再从A文件夹找B。
• 问题的解决：
  
  引入peerDependencies配置：{ "peerDependencies": { "B": "1.0.0" } }就可以解决了