学习日记-package.json配置文件解读

一.解读配置文件

好的，首先先看一下一个小项目的package.json

{
  "name": "study",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "dir"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.0",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

首先我们可以看到，有以下几个模块，一一来解读

1. name，version，private不用说了，分别是项目名，版本，是否私有
2. script
   这个是困扰我的东西，刚开始学的时候，其实他就是一些脚本命令

{
	"serve": "vue-cli-service serve",
	"build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test": "dir"
}

使用npm+run+指令就可以运行后面的东西
例如，npm run serve 其实就是运行vue-cli自带的运行项目指令
npm run build 自带的打包指令 打包到dist
npm run lint 这个是设置了eslint ，运行的时候就会来检查代码规范

三。两个依赖
dependencies和Devdependencies 分别是运行时依赖，和开发时依赖
根据字面意思，就是运行的时候需要的包。开发依赖：开发的时候需要的包，在项目打包上线的时候，不会打包开发依赖。

 运行依赖就是项目需要这些才可以跑起来。
 开发依赖就是只用作开发，不用做生产，比如打包工具或者单元测试这些
 举个栗子：
 npm官方文档将它定义为开发中所使用的外部的测试或者文档框架，
 文章中提到，开发依赖的目的是为了减少在安装依赖时node_modules的体积，提升安装依赖的速度，
 节省线上及其的硬盘资源以及部署上线的时间。
 那么那些依赖可以划分为开发依赖呢？

1、构建工具
点名webpack、webpack-cli、rollup（其实我没用过）等等。构建工具是为了生成生产环境的代码，在线上使用的代码其实是他们工作的结果，也就是说在线上时，并不需要他们，因此他们可以归为开发依赖。

当然他们衍生出来的插件，如xxx-webpack-plugin，也属于开发依赖。

2、预处理器
指的是对源代码进行一定的处理并生成最终代码的工具。常见的有css中的less、scss、sass、stylus，js中的typescript、coffee-script、babel等等。

以 babel 为例，常用的有两种使用方式。其一是内嵌在 webpack 或者 rollup 等构件工具中，一般以 loader 或者 plugin 的形式出现，例如 babel-loader。其二是单独使用（小项目较多），例如 babel-cli。babel 还额外有自己的插件体系，例如 xxx-babel-plugin。类似地，less 也有与之对应的 less-loader 和 lessc。这些都算作开发依赖。

在 babel 中还有一个注意点，那就是 babel-runtime 是 dependencies 而不是 devDependencies。

3、测试工具
当然在线上时是用不到测试工具的，因此他们归入开发依赖。常用如chai、e2e等等。

4、其他
最后一类很难概括，是开发时需要使用的，实际上显示要么是已经打包成最终代码了，要么是不需要了。比如 webpack-dev-server 支持开发热加载，线上是不用的；babel-register 因为性能原因也不能用在线上。其他还可能和具体业务相关。

五，eslintrules，就是eslint语法的检查规则，这个有兴趣可以自己研究研究
六，browserslist 这个是项目支持的浏览器范围，大东西，日后研究
指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀

好的，以上就是简单的一些构建。那关于工作的package.json。后面再研究。

ps：第一次写，排版好差