前言

隨著前端的不斷發(fā)展，package.json可謂是在前端項(xiàng)目中無處不在，它不僅在項(xiàng)目根目錄會有，而且在 node_modules 中也存在。那么這個(gè)文件到底是干嘛的，又有什么作用？很多人對它的認(rèn)識是不是只停留在dependencies、devDependencies項(xiàng)目依賴列表，或者是script項(xiàng)目的各種腳本指令等，實(shí)際上它能做的事情遠(yuǎn)不止這些。

創(chuàng)建package.json

現(xiàn)如今當(dāng)你使用腳手架生成一個(gè)基本的項(xiàng)目時(shí)，它會自動幫你生成package.json。

當(dāng)我們手動創(chuàng)建項(xiàng)目時(shí)，可以使用npm init，然后根據(jù)提示一步步輸入相應(yīng)的內(nèi)容完成后即可自動創(chuàng)建，當(dāng)然你也可以使用npm init -y跳過交互直接生成

npm init

生成的基礎(chǔ)package.json文件內(nèi)容如下：

這樣看著非常簡單，事實(shí)上，它所包含的功能屬性遠(yuǎn)不止這些。

常見屬性

name

它表示項(xiàng)目名稱，該字段決定了你發(fā)布的包在 npm 的名字，也就是平時(shí)安裝依賴的包名

一些規(guī)則：

• 名稱必須小于或等于 214 個(gè)字符。這包括范圍包的范圍。
• 作用域包的名稱可以以點(diǎn)或下劃線開頭。如果沒有范圍，這是不允許的。
• 新包的名稱中不得包含大寫字母。
• 該名稱最終成為 URL、命令行參數(shù)和文件夾名稱的一部分。因此，名稱不能包含任何非 URL 安全字符。

version

它表示項(xiàng)目的版本號，該"version"屬性必須采用major.minor.patch格式的形式。它還必須遵循語義版本控制準(zhǔn)則。

{
  "version": "1.0.0"
}

一般來講如果你計(jì)劃發(fā)布包，則package.json 中最重要的內(nèi)容就是name和version，因?yàn)樗鼈兪潜匦璧?。名稱和版本一起形成一個(gè)標(biāo)識符，假定該標(biāo)識符是完全唯一的。對包的更改應(yīng)該伴隨著對版本的更改。如果你不打算發(fā)布包，則name和version字段是可選的。

description

它表示項(xiàng)目的描述信息，該內(nèi)容會直接展示在npm官網(wǎng)，它主要是為了讓其他人快速了解的項(xiàng)目

keywords

它表示項(xiàng)目的關(guān)鍵字，它是一個(gè)數(shù)組，它可以方便其他人更好的搜索

{
  "keywords": ["songyao", "songyao-cli", "cli"]
}

比如這個(gè)我之前寫的腳手架，在npm上的檢索信息

author

它表示項(xiàng)目的作者信息，它既可以是一個(gè)字符串，又可以是一個(gè)對象

{
  "author": "nanjiu"
}

{
  "author": {
    "name": "nanjiu",
    "email": "xxx@163.com",
    "url": "https://bettersong.github.io/nanjiu/"
  }
}

其中email、url是可選的

repository

它表示項(xiàng)目的倉庫地址

簡單寫法：

{
  "repository": "https://github.com/***"
}

版本控制寫法：

{
  "repository": {
  "type": "git",
  "url": "http://github.com/***",
  "directory": "nanjiu"
    }
}

contributors

它表示項(xiàng)目的貢獻(xiàn)者，該字段是一個(gè)數(shù)組

{
  "contributors": [
  {
      "name" : "nanjiu",
      "email" : "nanjiu@xx.com",
      "url" : "https://bettersong.github.io/nanjiu/"
    },
 ]
}

script

它表示項(xiàng)目的可執(zhí)行腳本命令

{
  "script": {
    "start": "node ./build/cli.js start",
    "dev": "vue-cli-service serve --mode dev",
    "build:oa": "vue-cli-service build --mode oa",
    "build:oa-legacy": "vue-cli-service build --mode oa --modern",
    "build:pre": "vue-cli-service build --mode pre --modern",
  }
}

執(zhí)行時(shí)使用npm run對應(yīng)的key就可以，比如npm run start

每個(gè) npm script 有 pre 和 post 兩個(gè)鉤子, pre 鉤子在腳本執(zhí)行前將被觸發(fā), post 則是在腳本執(zhí)行后觸發(fā)

### dependencies

它表示項(xiàng)目生產(chǎn)環(huán)境中所需的依賴，當(dāng)使用npm安裝時(shí)，依賴會默認(rèn)插入該字段中

{
  "dependencies": {
    "@nestjs/common": "^10.0.0",
    "@nestjs/core": "^10.0.0",
    "@nestjs/mapped-types": "*",
    "@nestjs/platform-express": "^10.0.0",
    "@types/cors": "^2.8.13",
    "cors": "^2.8.5",
    "reflect-metadata": "^0.1.13",
    "rxjs": "^7.8.1",
  }
}

在安裝依賴時(shí)也可以使用--save參數(shù)，表示依賴是生產(chǎn)環(huán)境所需

npm install <packagename> --save

或者使用-S簡寫

npm i <packagename> -S

devDependencies

它表示項(xiàng)目開發(fā)環(huán)境所需的依賴，比如webpack、vite、babel等工程化依賴包。這些依賴表示只需要在開發(fā)環(huán)境安裝，無需在生產(chǎn)環(huán)境安裝。

{
  "devDependencies": {
    "@nestjs/cli": "^10.0.0",
    "@nestjs/schematics": "^10.0.0",
    "@nestjs/testing": "^10.0.0",
  }
}

想要將依賴制定安裝在devDependencies下，可以使用如下命令：

npm i <packagename> --save-dev

或者

npm i <packagename> -D

browserslist

它表示打包時(shí)需要支持哪些瀏覽器，一般babel、autoperfixer會使用該字段進(jìn)行配置

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "iOS >= 9.3",
    "Android >= 6.0"
  ],
}

babel

它表示babel的配置項(xiàng)，用來指定babel的編譯配置

{
  "babel": {
    "presets": ["@babel/preset-env"]
  }
}

不過推薦做法還是使用babel單獨(dú)配置文件：babel.config.js等

gitHooks

它表示git定制化腳本程序，可以用來配置代碼提交檢測等

比如：

{
  "scripts": {
    "lint:diff": "node ./models/pre_commit.js"
  },
  "gitHooks": {
    "pre-commit": "npm run lint:diff"
  },
}

hook類型有很多種：

• commit-msg： 鉤子在啟動提交信息編輯器之前，默認(rèn)信息被創(chuàng)建之后運(yùn)行。
• post-update： 僅在所有的ref被push之后執(zhí)行一次。它與post-receive很像，但是不接收舊值與新值。主要用于通知。
• pre-applypatch： 實(shí)際上的調(diào)用時(shí)機(jī)是應(yīng)用補(bǔ)丁之后、變更c(diǎn)ommit之前。
• pre-commit： 鉤子在鍵入提交信息前運(yùn)行。
• prepare-commit-msg： 鉤子在啟動提交信息編輯器之前，默認(rèn)信息被創(chuàng)建之后運(yùn)行。
• pre-push： 鉤子會在 git push 運(yùn)行期間， 更新了遠(yuǎn)程引用但尚未傳送對象時(shí)被調(diào)用。
• pre-rebase： 鉤子運(yùn)行于變基之前，以非零值退出可以中止變基的過程。
• post-checkout： 更新工作樹后調(diào)用checkout時(shí)調(diào)用，或者執(zhí)行 git clone后調(diào)用。主要用于驗(yàn)證環(huán)境、顯示變更、配置環(huán)境。
• 等...

陌生屬性

以上這些屬性想必是每個(gè)package.json文件中常見的屬性，但它除了以上這些屬性之外還有許多同樣非常重要的屬性。

bugs

它表示項(xiàng)目問題的提交地址，這個(gè)一般在開源項(xiàng)目中見的多

{
  "bugs": {
     "url" : "http://github.com/***/issues",
       "email" : "nanjiu@xx.com"
  }
}

peerDependencies

它表示項(xiàng)目對等依賴，使用npm install --save-peer安裝

這個(gè)其實(shí)在我們工作中用的并不多，一般用于開發(fā)插件，防止項(xiàng)目在安裝該插件時(shí)，多次安裝相同的依賴

{
  "peerDependencies": { 
  "react": ">=16.9.0", 
  "react-dom": ">=16.9.0" 
  },
}

需要注意的是在 npm 2 中，當(dāng)我們下載 ant-design@3.x 時(shí)，peerDependencies 中指定的依賴會隨著 ant-design@3.x 一起被強(qiáng)制安裝，所以我們不需要在宿主項(xiàng)目的 package.json 文件中指定 peerDependencies 中的依賴，但是在 npm 3 中，不會再強(qiáng)制安裝 peerDependencies 中所指定的包，而是通過警告的方式來提示我們，此時(shí)就需要手動在 package.json 文件中手動添加依賴

optionalDependencies

它表示可選依賴項(xiàng)

當(dāng)你希望某些依賴即使下載失敗或者沒有找到時(shí)，項(xiàng)目依然可以正常運(yùn)行或者 npm 繼續(xù)運(yùn)行的時(shí)，就可以把這些依賴放在 optionalDependencies 對象中，但是 optionalDependencies 會覆蓋 dependencies 中的同名依賴包，所以不要把一個(gè)包同時(shí)寫進(jìn)兩個(gè)對象中。

需要注意，由于optionalDependencies中的依賴可能并為安裝成功，所以一定要做異常處理，否則當(dāng)獲取這個(gè)依賴時(shí)，如果獲取不到就會報(bào)錯。

try { 
  var axios = require('axios') 
  var fooVersion = require('axios/package.json').version 
} catch (er) { 
  // 報(bào)錯
}

bundledDependencies

它表示捆綁依賴項(xiàng)

與其他幾種依賴項(xiàng)不同，他不是一個(gè)鍵值對的對象，而是一個(gè)數(shù)組，數(shù)組里是包名的字符串，例如：

{
  "bundleDependencies": [ 
    "axios",  
    "lodash" 
  ] 
}

engines

它表示聲明node環(huán)境

與依賴關(guān)系一樣，如果不指定版本(或者指定“ *”作為版本) ，那么任何版本的節(jié)點(diǎn)都可以。

{
  "engines": {
    "node": ">=0.10.3 <15"
  }
}

main

它表示項(xiàng)目的入口文件，如果不指定該字段，默認(rèn)是根目錄下的index.js

{
  "main": "./src/index.js",
}

從 Node.js 12.20.0 版本開始，"main" 字段也可以指定 ES 模塊的入口文件

browser

它表示UMD模塊的入口文件

UMD：兼容 CommonJS 和 AMD 的模塊，既可以在 node 環(huán)境中被 require 引用，也可以在瀏覽器中直接用 CDN 被script標(biāo)簽 引入

main 字段里指定的入口文件在 browser 和 node 環(huán)境中都可以使用。如果只想在 web 端使用，禁止在 server 端使用，可以通過 browser 字段指定入口。

{
  "browser": "./src/index.js" 
}

module（非官方字段）

它表示ES模塊入口文件，瀏覽器環(huán)境和 node環(huán)境均可使用

{
  "module": "./src/index.js" 
}

在Web環(huán)境中，如果使用loader加載ESM（ES module），那么這三個(gè)配置的加載順序是browser→module→main，如果使用require加載CommonJS模塊，則加載的順序?yàn)?code>main→module→browser。

main、browser、module三個(gè)字段都是用于 npm 包的，如果項(xiàng)目不是作為 npm 包發(fā)布，這三個(gè)字段不需要寫。

• 導(dǎo)出包只在 web 端使用，并且禁止在 server 端使用，使用 browser
• 導(dǎo)出包只在 server 端使用，使用 main
• 導(dǎo)出 ESM 規(guī)范的包，使用 module
• 導(dǎo)出包在 web 端和 server 端都允許使用，使用 module 和 main

exports（非官方字段）

它表示當(dāng)打包工具支持exports字段時(shí)， main/browser/module的配置將被忽略，而使用該字段

{
  "exports": {
    "require": "./index.js",
    "import": "./index.mjs"
  }
}

type（非官方字段）

它表示指定使用那種模塊方式，默認(rèn)值為commonjs

比如指定使用ES Module：

{
  "type":"module"
}

files

它表示指定哪些文件可以被上傳到npm上，有點(diǎn)類似.gitignore，但功能與之相反

{
  "files": [
    "index.js",
    "dist"
  ],
}

無論設(shè)置如何，始終包含某些文件：

• package.json
• README
• LICENSE/LICENCE
• main字段中的文件

os

它表示該模塊只能在那個(gè)操作系統(tǒng)上運(yùn)行

{
  "os" : [ "darwin", "linux", "win32" ]
}

還可以阻止而不是允許操作系統(tǒng)，只需在被阻止的操作系統(tǒng)前面加上!

{
  "os": [
    "!win32"
  ]
}

cpu

它表示指定項(xiàng)目只在某些CPU架構(gòu)上運(yùn)行

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

與os類似，它同樣可以使用!

{
  "cpu": [
    "!arm",
    "!mips"
  ]
}

private

它表示該項(xiàng)目是私有的，可以防止我們將私有項(xiàng)目發(fā)布到npm上

{
  "private": true
}

preferGlobal

當(dāng)設(shè)置 preferGlobal 字段為 true 時(shí)，它表示你的包更適合以全局方式安裝，而不是作為項(xiàng)目的依賴項(xiàng)進(jìn)行本地安裝。

{
  "preferGlobal": true
}

以上就是前端必會的package.json創(chuàng)建及常見屬性用法示例詳解的詳細(xì)內(nèi)容，更多關(guān)于package.json屬性用法的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論