Vue package.json配置深入分析

前言

package.json是每个前端项目都会有的json文件，位于项目的根目录中。很多脚手架在创建项目的时候会帮我们自动初始化好 package.json。package.json有许多配置与项目息息相关，了解他们有助于对项目的开发，上一篇文章已经完成 package.json 的基础配置的讲解，接下来开始剩余部分的学习。

今天主要介绍一些常用的配置，分为了七大类，分别是：

• 依赖配置
• 发布配置
• 系统配置
• 第三方配置

一、依赖配置

项目开发过程中会依赖其他包，需要在 package.json 里配置这些依赖的信息。

dependencies

运行依赖，也就是项目生产环境下需要用到的依赖。比如 vue，vuex以及组件库等。

使用 npm install xxx 或则 npm install xxx --save 时，会被自动插入到该字段中。

  "dependencies": {
    "element-plus": "^2.2.28",
    "pinia": "^2.0.28",
    "sass": "^1.57.1",
    "vite": "^4.0.3",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  },

devDependencies

开发依赖，项目开发环境需要用到而运行时不需要的依赖，用于辅助开发，通常包括项目工程化工具比如 vite，eslint 等。

使用 npm install xxx -D 或者 npm install xxx --save-dev 时，会被自动插入到该字段中。

  "devDependencies": {
    "cz-git": "^1.4.1",
    "eslint": "^8.30.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-define-config": "^1.12.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.8.0",
    "husky": "^8.0.0",
    "less": "^4.1.3",
    "lint-staged": "^13.1.0",
    "postcss-html": "^1.5.0",
    "postcss-less": "^6.0.0",
    "prettier": "^2.8.1",
    "stylelint": "^14.16.0",
    "stylelint-config-html": "^1.1.0",
  }

peerDependencies

同伴依赖是一种特殊的依赖，不会被自动安装，通常用于表示与另一个包的依赖与兼容性关系来警示使用者。

optionalDependencies

可选依赖，表示依赖是可选的，它不会阻塞主功能的使用，安装或者引入失败也无妨。这类依赖如果安装失败，那么 npm 的整个安装过程也是成功的。

使用 npm install xxx -O 或者 npm install xxx --save-optional 时，依赖会被自动插入到该字段中。

bundleDependencies

打包依赖。它的值是一个数组，在发布包时，bundleDependencies 里面的依赖都会被一起打包。

在执行 npm pack 打包生成 tgz 压缩包中，将出现 node_modules 并包含 react 和 react-dom。

需要注意的是，这个字段数组中的值必须是在 dependencies，devDependencies 两个里面声明过的依赖才可以。普通依赖通常从 npm registry 安装，但当你想用一个不在 npm registry 里的包，或者一个被修改过的第三方包时，打包依赖会比普通依赖更好用。

二、发布配置

主要是一些和项目发布有关的配置

private

如果是私有项目，不希望发布到公共 npm 仓库上，可以将 private 设为 true。

"private": true

publishConfig

publishConfig 就是 npm 包发布时使用的配置。

比如在安装依赖时指定了 registry 为 taobao 镜像源，但发布时希望在公网发布，就可以指定 publishConfig.registry。

"publishConfig": {
  "registry": "https://registry.npmjs.org/"
}

三、系统配置

项目有关的系统配置，比如 node 版本或操作系统兼容性之类。但是值得注意的是这些要求只会起到提示警告的作用，即使用户的环境不符合要求，也不影响安装依赖包。

engines

一些项目由于兼容性问题会对 node 或者包管理器有特定的版本号要求，比如：要求 node 版本大于等于 12 且小于 16，同时 pnpm 版本号需要大于 7。

"engines": {
  "node": ">=12 <16",
  "pnpm": ">7"
}

os

在 linux 上能正常运行的项目可能在 windows 上会出现异常，使用 os 字段可以指定项目对操作系统的兼容性要求。

"os": ["darwin", "linux"]

cpu

指定项目只能在特定的 CPU 体系上运行。

"cpu": ["x64", "ia32"]

四、第三方配置

一些第三方库或应用在进行某些内部处理时会依赖这些字段，使用它们时需要安装对应的第三方库。

types或者typings

指定 TypeScript 的类型定义的入口文件

"types": "./index.ts",

browserslist

设置项目的浏览器兼容情况。babel 和 autoprefixer 等工具会使用该配置对代码进行转换。当然你也可以使用 .browserslistrc 单文件配置。

"browserslist": [
  "> 1%",
  "last 2 versions"
]

sideEffects

显示设置某些模块具有副作用，用于 webpack 的 tree-shaking 优化。

比如在项目中整体引入 Ant Design 组件库的 css 文件。

import 'antd/dist/antd.css'; 

如果 Ant Design 的 package.json 里不设置 sideEffects，那么 webapck 构建打包时会认为这段代码只是引入了但并没有使用，可以 tree-shaking 剔除掉，最终导致产物缺少样式。

lint-staged

lint-staged 是用于对 git 的暂存区的文件进行操作的工具，比如可以在代码提交前执行 lint 校验，类型检查，图片优化等操作。

"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "git add -A"
  ]
}

lint-staged 通常配合 husky 这样的 git-hooks 工具一起使用。git-hooks 用来定义一个钩子，这些钩子方法会在 git 工作流程中比如 pre-commit，commit-msg 时触发，可以把 lint-staged 放到这些钩子方法中。

五、结语

今天我们简单了解了 package.json 的常见配置。有了这些知识，我们可以更好的了解项目。但 package.json 里的内容远不止如此，需要我们进一步学习。

到此这篇关于Vue package.json配置深入分析的文章就介绍到这了,更多相关Vue package.json内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！