前言

package.json是每個前端項目都會有的json文件，位于項目的根目錄中。很多腳手架在創(chuàng)建項目的時候會幫我們自動初始化好 package.json。package.json有許多配置與項目息息相關(guān)，了解他們有助于對項目的開發(fā)，上一篇文章已經(jīng)完成 package.json 的基礎(chǔ)配置的講解，接下來開始剩余部分的學(xué)習(xí)。

今天主要介紹一些常用的配置，分為了七大類，分別是：

• 依賴配置
• 發(fā)布配置
• 系統(tǒng)配置
• 第三方配置

一、依賴配置

項目開發(fā)過程中會依賴其他包，需要在 package.json 里配置這些依賴的信息。

dependencies

運行依賴，也就是項目生產(chǎn)環(huán)境下需要用到的依賴。比如 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

開發(fā)依賴，項目開發(fā)環(huán)境需要用到而運行時不需要的依賴，用于輔助開發(fā)，通常包括項目工程化工具比如 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

同伴依賴是一種特殊的依賴，不會被自動安裝，通常用于表示與另一個包的依賴與兼容性關(guān)系來警示使用者。

optionalDependencies

可選依賴，表示依賴是可選的，它不會阻塞主功能的使用，安裝或者引入失敗也無妨。這類依賴如果安裝失敗，那么 npm 的整個安裝過程也是成功的。

使用 npm install xxx -O 或者 npm install xxx --save-optional 時，依賴會被自動插入到該字段中。

bundleDependencies

打包依賴。它的值是一個數(shù)組，在發(fā)布包時，bundleDependencies 里面的依賴都會被一起打包。

在執(zhí)行 npm pack 打包生成 tgz 壓縮包中，將出現(xiàn) node_modules 并包含 react 和 react-dom。

需要注意的是，這個字段數(shù)組中的值必須是在 dependencies，devDependencies 兩個里面聲明過的依賴才可以。普通依賴通常從 npm registry 安裝，但當(dāng)你想用一個不在 npm registry 里的包，或者一個被修改過的第三方包時，打包依賴會比普通依賴更好用。

二、發(fā)布配置

主要是一些和項目發(fā)布有關(guān)的配置

private

如果是私有項目，不希望發(fā)布到公共 npm 倉庫上，可以將 private 設(shè)為 true。

"private": true

publishConfig

publishConfig 就是 npm 包發(fā)布時使用的配置。

比如在安裝依賴時指定了 registry 為 taobao 鏡像源，但發(fā)布時希望在公網(wǎng)發(fā)布，就可以指定 publishConfig.registry。

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

三、系統(tǒng)配置

項目有關(guān)的系統(tǒng)配置，比如 node 版本或操作系統(tǒng)兼容性之類。但是值得注意的是這些要求只會起到提示警告的作用，即使用戶的環(huán)境不符合要求，也不影響安裝依賴包。

engines

一些項目由于兼容性問題會對 node 或者包管理器有特定的版本號要求，比如：要求 node 版本大于等于 12 且小于 16，同時 pnpm 版本號需要大于 7。

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

os

在 linux 上能正常運行的項目可能在 windows 上會出現(xiàn)異常，使用 os 字段可以指定項目對操作系統(tǒng)的兼容性要求。

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

cpu

指定項目只能在特定的 CPU 體系上運行。

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

四、第三方配置

一些第三方庫或應(yīng)用在進行某些內(nèi)部處理時會依賴這些字段，使用它們時需要安裝對應(yīng)的第三方庫。

types或者typings

指定 TypeScript 的類型定義的入口文件

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

browserslist

設(shè)置項目的瀏覽器兼容情況。babel 和 autoprefixer 等工具會使用該配置對代碼進行轉(zhuǎn)換。當(dāng)然你也可以使用 .browserslistrc 單文件配置。

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

sideEffects

顯示設(shè)置某些模塊具有副作用，用于 webpack 的 tree-shaking 優(yōu)化。

比如在項目中整體引入 Ant Design 組件庫的 css 文件。

import 'antd/dist/antd.css'; 

如果 Ant Design 的 package.json 里不設(shè)置 sideEffects，那么 webapck 構(gòu)建打包時會認(rèn)為這段代碼只是引入了但并沒有使用，可以 tree-shaking 剔除掉，最終導(dǎo)致產(chǎn)物缺少樣式。

lint-staged

lint-staged 是用于對 git 的暫存區(qū)的文件進行操作的工具，比如可以在代碼提交前執(zhí)行 lint 校驗，類型檢查，圖片優(yōu)化等操作。

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

lint-staged 通常配合 husky 這樣的 git-hooks 工具一起使用。git-hooks 用來定義一個鉤子，這些鉤子方法會在 git 工作流程中比如 pre-commit，commit-msg 時觸發(fā)，可以把 lint-staged 放到這些鉤子方法中。

五、結(jié)語

今天我們簡單了解了 package.json 的常見配置。有了這些知識，我們可以更好的了解項目。但 package.json 里的內(nèi)容遠(yuǎn)不止如此，需要我們進一步學(xué)習(xí)。

到此這篇關(guān)于Vue package.json配置深入分析的文章就介紹到這了,更多相關(guān)Vue package.json內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！