前言

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

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

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

一、依賴配置

項(xiàng)目開(kāi)發(fā)過(guò)程中會(huì)依賴其他包，需要在 package.json 里配置這些依賴的信息。

dependencies

運(yùn)行依賴，也就是項(xiàng)目生產(chǎn)環(huán)境下需要用到的依賴。比如 vue，vuex以及組件庫(kù)等。

使用 npm install xxx 或則 npm install xxx --save 時(shí)，會(huì)被自動(dòng)插入到該字段中。

  "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

開(kāi)發(fā)依賴，項(xiàng)目開(kāi)發(fā)環(huán)境需要用到而運(yùn)行時(shí)不需要的依賴，用于輔助開(kāi)發(fā)，通常包括項(xiàng)目工程化工具比如 vite，eslint 等。

使用 npm install xxx -D 或者 npm install xxx --save-dev 時(shí)，會(huì)被自動(dòng)插入到該字段中。

  "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

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

optionalDependencies

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

使用 npm install xxx -O 或者 npm install xxx --save-optional 時(shí)，依賴會(huì)被自動(dòng)插入到該字段中。

bundleDependencies

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

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

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

二、發(fā)布配置

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

private

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

"private": true

publishConfig

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

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

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

三、系統(tǒng)配置

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

engines

一些項(xiàng)目由于兼容性問(wèn)題會(huì)對(duì) node 或者包管理器有特定的版本號(hào)要求，比如：要求 node 版本大于等于 12 且小于 16，同時(shí) pnpm 版本號(hào)需要大于 7。

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

os

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

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

cpu

指定項(xiàng)目只能在特定的 CPU 體系上運(yùn)行。

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

四、第三方配置

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

types或者typings

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

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

browserslist

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

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

sideEffects

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

比如在項(xiàng)目中整體引入 Ant Design 組件庫(kù)的 css 文件。

import 'antd/dist/antd.css'; 

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

lint-staged

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

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

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

五、結(jié)語(yǔ)

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

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

最新評(píng)論