# 配置（package）

前言

初步掌握package.json相关知识点，重点关注注意事项

# 1.package.json

注意

区分dependencies依赖和devDependencies依赖

{
  "name": "vue3-demo", // 项目/模块名称，长度必须小于等于214个字符，不能以"."(点)或者"_"(下划线)开头，不能包含大写字母
  "version": "0.1.0", // 项目版本
  "author": "zhoubichuan", // 项目开发者，https://npmjs.org账户名，遵循“账户名<邮件>”的规则，例如：zhoubichuan zhoubichuan@icloud.com
  "description": "demo", // 项目描述，是一个字符串。它可以帮助人们在使用npm search时找到这个包
  "keywords": "demo", // 项目关键字，是一个字符串数组。它可以帮助人们在使用npm search时找到这个包
  "private": true, // 是否私有，设置为 true 时，npm 拒绝发布
  "scripts": {
    // 执行 npm 脚本命令简写，比如 “start”: “react-scripts start”, 执行 npm start 就是运行 “react-scripts start”
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    // 生产环境下，项目运行所需依赖
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    // 开发环境下，项目所需依赖
    "@types/chai": "^4.2.11",
    "@types/mocha": "^5.2.4",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-mocha": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "chai": "^4.1.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

其他一些配置说明

license：软件授权条款，让用户知道他们的使用权利和限制。
bugs：bug 提交地址。
contributors：项目贡献者。
repository：项目仓库地址。
homepage：项目包的官网 URL。
bin：内部命令对应的可执行文件的路径。
main：项目默认执行文件，比如 require(‘webpack’)；就会默认加载 lib 目录下的 webpack.js 文件，如果没有设置，则默认加载项目跟目录下的 index.js 文件。
module：是以 ES Module(也就是 ES6)模块化方式进行加载，因为早期没有 ES6 模块化方案时，都是遵循 CommonJS 规范，而 CommonJS 规范的包是以 main 的方式表示入口文件的，为了区分就新增了 module 方式，但是 ES6 模块化方案效率更高，所以会优先查看是否有 module 字段，没有才使用 main 字段。
eslintConfig：EsLint 检查文件配置，自动读取验证。
engines：项目运行的平台。
browserslist：供浏览器使用的版本列表。
style：供浏览器使用时，样式文件所在的位置；样式文件打包工具 parcelify，通过它知道样式文件的打包位置。
files：被项目包含的文件名数组

# 2.scripts

配置相关命令，通过node识别相关信息，执行相关命令

# 3.browserslist

browserslist 第三方插件配置，该配置的主要作用是用于在不同的前端工具之间共享目标浏览器和 Node.js 的版本

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12

# 3.1 `.browserslistrc`

当然，你也可以单独写在.browserslistrc的文件中

> 1%
last 2 versions
not ie <= 8

1
2
3

# 3.2 `autoprefixer`

autoprefixer这样的插件需要把你写的 css 样式适配不同的浏览器，那么这里要针对那些浏览器呢，即使上面配置中所包含的。

而如果写在 autoprefixer 的配置中，那么会存在一个问题，万一其他第三方插件也需要浏览器的包含范围用于实现其特定的功能，那么就又得在其配置中设置一遍，这样就无法得以共用。所以在 package.json 中配置 browserslist 的属性使得所有工具都会自动找到目标浏览器。

至于它是如何平衡浏览器的使用率和版本的，数据都是来源于 Can I Use。你也可以搜索配置项所包含的浏览器列表，比如搜索last 2 versions 会得到你想要的结果，或者在项目终端运行如下命令查看：

npx browserslist

# 4.engines

当我们维护一些旧项目时，可能对 npm 包的版本或者 Node 版本有特殊要求，如果不满足条件就可能无法将项目跑起来。为了让项目开箱即用，可以在 engines 字段中说明具体的版本号：

"engines": {
 "node": ">=8.10.3 <12.13.0",
  "npm": ">=6.9.0"
}

1
2
3
4

需要注意，engines 只是起一个说明的作用，即使用户安装的版本不符合要求，也不影响依赖包的安装

# 4.1 nvmrc

# 5.`.postcssrc.js`

← 初始化（创建项目）配置（VueCLI） →