前言：

今天來(lái)看看前端的大管家package.json文件相關(guān)的配置，充分了解這些配置有助于我們提高開(kāi)發(fā)的效率，規(guī)范我們的項(xiàng)目。文章內(nèi)容較多，建議先收藏在學(xué)習(xí)！

在每個(gè)前端項(xiàng)目中，都有package.json文件，它是項(xiàng)目的配置文件，常見(jiàn)的配置有配置項(xiàng)目啟動(dòng)、打包命令，聲明依賴包等。package.json文件是一個(gè)JSON對(duì)象，該對(duì)象的每一個(gè)成員就是當(dāng)前項(xiàng)目的一項(xiàng)設(shè)置。package.json作為前端的大管家，到底有哪些配置和我們的日常開(kāi)發(fā)密切相關(guān)？下面就來(lái)仔細(xì)剖析一下這個(gè)文件。​

當(dāng)我們搭建一個(gè)新項(xiàng)目時(shí)，往往腳手架就幫我們初始化好了一個(gè)package.jaon配置文件，它位于項(xiàng)目的根目錄中。當(dāng)使用react腳手架（create-react-app）初始化一個(gè)項(xiàng)目時(shí)，其package.json文件內(nèi)容如下：

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

當(dāng)我們克隆一個(gè)新的項(xiàng)目到本地時(shí)，需要執(zhí)行npm install（yarn install）命令來(lái)安裝項(xiàng)目所需的依賴文件。當(dāng)執(zhí)行該命令時(shí)，就會(huì)根據(jù)package.json文件中的配置信息來(lái)自動(dòng)下載所需的模塊，也就是配置項(xiàng)目所需的運(yùn)行和開(kāi)發(fā)環(huán)境。​

package.json 常見(jiàn)配置項(xiàng)如下：

一、必須屬性

package.json中最重要的兩個(gè)字段就是name和version，它們都是必須的，如果沒(méi)有，就無(wú)法正常執(zhí)行npm install命令。npm規(guī)定package.json文件是由名稱和版本號(hào)作為唯一標(biāo)識(shí)符的。

1. name

name很容易理解，就是項(xiàng)目的名稱，它是一個(gè)字符串。

在給name字段命名時(shí)，需要注意以下幾點(diǎn)：

• 名稱的長(zhǎng)度必須小于或等于214個(gè)字符，不能以“.”和“_”開(kāi)頭，不能包含大寫字母（這是因?yàn)楫?dāng)軟件包在npm上發(fā)布時(shí)，會(huì)基于此屬性獲得自己的URL，所以不能包含非URL安全字符（non-url-safe））；
• 名稱可以作為參數(shù)被傳入require("")，用來(lái)導(dǎo)入模塊，所以應(yīng)當(dāng)盡可能的簡(jiǎn)短、語(yǔ)義化；
• 名稱不能和其他模塊的名稱重復(fù)，可以使用npm view命令查詢模塊明是否重復(fù)，如果不重復(fù)就會(huì)提示404：
  

如果npm包上有對(duì)應(yīng)的包，則會(huì)顯示包的詳細(xì)信息：

實(shí)際上，我們平時(shí)開(kāi)發(fā)的很多項(xiàng)目并不會(huì)發(fā)布在npm上，所以這個(gè)名稱是否標(biāo)準(zhǔn)可能就不是那么重要，它不會(huì)影響項(xiàng)目的正常運(yùn)行。如果需要發(fā)布在npm上，name字段一定要符合要求。

2. version

version字段表示該項(xiàng)目包的版本號(hào)，它是一個(gè)字符串。在每次項(xiàng)目改動(dòng)后，即將發(fā)布時(shí)，都要同步的去更改項(xiàng)目的版本號(hào)。

版本號(hào)的使用規(guī)范如下：

• 版本號(hào)的命名遵循語(yǔ)義化版本2.0.0規(guī)范，格式為：主版本號(hào).次版本號(hào).修訂號(hào)，通常情況下，修改主版本號(hào)是做了大的功能性的改動(dòng)，修改次版本號(hào)是新增了新功能，修改修訂號(hào)就是修復(fù)了一些bug；
• 如果某個(gè)版本的改動(dòng)較大，并且不穩(wěn)定，可能如法滿足預(yù)期的兼容性需求，就需要發(fā)布先行版本，先行版本通過(guò)會(huì)加在版本號(hào)的后面，通過(guò)“-”號(hào)連接以點(diǎn)分隔的標(biāo)識(shí)符和版本編譯信息：內(nèi)部版本（alpha）、公測(cè)版本（beta）和候選版本（rc，即release candiate）。
  

可以通過(guò)以下命令來(lái)查看npm包的版本信息，以react為例：

// 查看最新版本
npm view react version
// 查看所有版本
npm view react versions

當(dāng)執(zhí)行第二條命令時(shí)，結(jié)果如下：

二、描述信息

package.jaon中有五個(gè)和項(xiàng)目包描述信息相關(guān)的配置字段，下面就分別來(lái)看看這些字段的含義。

1. description

description字段用來(lái)描述這個(gè)項(xiàng)目包，它是一個(gè)字符串，可以讓其他開(kāi)發(fā)者在 npm 的搜索中發(fā)現(xiàn)我們的項(xiàng)目包。

2. keywords

keywords字段是一個(gè)字符串?dāng)?shù)組，表示這個(gè)項(xiàng)目包的關(guān)鍵詞。和description一樣，都是用來(lái)增加項(xiàng)目包的曝光率的。

下面是eslint包的描述和關(guān)鍵詞：

3. author

author顧名思義就是作者，表示該項(xiàng)目包的作者。它有兩種形式，一種是字符串格式：

"author": "CUGGZ <xxxxx@xx.com> (https://juejin.cn/user/3544481220801815)"

另一種是對(duì)象形式：

"author": {
  "name" : "CUGGZ",
  "email" : "xxxxx@xx.com",
  "url" : "https://juejin.cn/user/3544481220801815"
}

4. contributors

contributors表示該項(xiàng)目包的貢獻(xiàn)者，和author不同的是，該字段是一個(gè)數(shù)組，包含所有的貢獻(xiàn)者，它同樣有兩種寫法：

"contributors": [
  "CUGGZ0 <xxxxx@xx.com> (https://juejin.cn/user/3544481220801815)",
  "CUGGZ1 <xxxxx@xx.com> (https://juejin.cn/user/3544481220801815)"
 ]

"contributors": [
  {
   "name" : "CUGGZ0",
   "email" : "xxxxx@xx.com",
   "url" : "https://juejin.cn/user/3544481220801815"
 },
  {
   "name" : "CUGGZ1",
   "email" : "xxxxx@xx.com",
   "url" : "https://juejin.cn/user/3544481220801815"
 }
 ]

5. homepage

homepage就是項(xiàng)目的主頁(yè)地址了，它是一個(gè)字符串。

6. repository

repository表示代碼的存放倉(cāng)庫(kù)地址，通常有兩種書寫形式。第一種是字符串形式：

"repository": "https://github.com/facebook/react.git"

除此之外，還可以顯式地設(shè)置版本控制系統(tǒng)，這時(shí)就是對(duì)象的形式：

"repository": {
  "type": "git",
  "url": "https://github.com/facebook/react.git"
}

7. bugs

bugs表示項(xiàng)目提交問(wèn)題的地址，該字段是一個(gè)對(duì)象，可以添加一個(gè)提交問(wèn)題的地址和反饋的郵箱：

"bugs": { 
  "url" : "https://github.com/facebook/react/issues",
  "email" : "xxxxx@xx.com"
}

最常見(jiàn)的bugs就是Github中的issues頁(yè)面，如上就是react的issues頁(yè)面地址。

三、依賴配置

通常情況下，我們的項(xiàng)目會(huì)依賴一個(gè)或者多個(gè)外部的依賴包，根據(jù)依賴包的不同用途，可以將他們配置在下面的五個(gè)屬性下：dependencies、devDependencies、peerDependencies、bundledDependencies、optionalDependencies 。下面就來(lái)看看每個(gè)屬性的含義。

1. dependencies

dependencies字段中聲明的是項(xiàng)目的生產(chǎn)環(huán)境中所必須的依賴包。當(dāng)使用 npm 或 yarn 安裝npm包時(shí)，該npm包會(huì)被自動(dòng)插入到此配置項(xiàng)中：

npm install <PACKAGENAME>
yarn add <PACKAGENAME>

當(dāng)在安裝依賴時(shí)使用--save參數(shù)，也會(huì)將新安裝的npm包寫入dependencies屬性。

npm install --save <PACKAGENAME>

該字段的值是一個(gè)對(duì)象，該對(duì)象的各個(gè)成員，分別由模塊名和對(duì)應(yīng)的版本要求組成，表示依賴的模塊及其版本范圍。

"dependencies": {
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "react-scripts": "4.0.3",
},

這里每一項(xiàng)配置都是一個(gè)鍵值對(duì)（key-value）， key表示模塊名稱，value表示模塊的版本號(hào)。

版本號(hào)遵循主版本號(hào).次版本號(hào).修訂號(hào)的格式規(guī)定：

• 固定版本： 上面的react-scripts的版本4.0.3就是固定版本，安裝時(shí)只安裝這個(gè)指定的版本；
• 波浪號(hào)： 比如~4.0.3，表示安裝4.0.x的最新版本（不低于4.0.3），也就是說(shuō)安裝時(shí)不會(huì)改變主版本號(hào)和次版本號(hào)；
• 插入號(hào)： 比如上面 react 的版本^17.0.2，表示安裝17.x.x的最新版本（不低于17.0.2），也就是說(shuō)安裝時(shí)不會(huì)改變主版本號(hào)。如果主版本號(hào)為0，那么插入號(hào)和波浪號(hào)的行為是一致的；
• latest：安裝最新的版本。
• 需要注意，不要把測(cè)試或者過(guò)渡性的依賴放在dependencies，避免生產(chǎn)環(huán)境出現(xiàn)意外的問(wèn)題。

2. devDependencies

devDependencies中聲明的是開(kāi)發(fā)階段需要的依賴包，如Webpack、Eslint、Babel等，用于輔助開(kāi)發(fā)。它們不同于 dependencies，因?yàn)樗鼈冎恍璋惭b在開(kāi)發(fā)設(shè)備上，而無(wú)需在生產(chǎn)環(huán)境中運(yùn)行代碼。當(dāng)打包上線時(shí)并不需要這些包，所以可以把這些依賴添加到 devDependencies 中，這些依賴依然會(huì)在本地指定 npm install 時(shí)被安裝和管理，但是不會(huì)被安裝到生產(chǎn)環(huán)境中。

當(dāng)使用 npm 或 yarn 安裝軟件包時(shí)，指定以下參數(shù)后，新安裝的npm包會(huì)被自動(dòng)插入到此列表中：

npm install --save-dev <PACKAGENAME>
yarn add --dev <PACKAGENAME>

"devDependencies": {
  "autoprefixer": "^7.1.2",
  "babel-core": "^6.22.1"
}

3. peerDependencies

有些情況下，我們的項(xiàng)目和所依賴的模塊，都會(huì)同時(shí)依賴另一個(gè)模塊，但是所依賴的版本不一樣。比如，我們的項(xiàng)目依賴A模塊和B模塊的1.0版，而A模塊本身又依賴B模塊的2.0版。大多數(shù)情況下，這不是問(wèn)題，B模塊的兩個(gè)版本可以并存，同時(shí)運(yùn)行。但是，有一種情況，會(huì)出現(xiàn)問(wèn)題，就是這種依賴關(guān)系將暴露給用戶。

最典型的場(chǎng)景就是插件，比如A模塊是B模塊的插件。用戶安裝的B模塊是1.0版本，但是A插件只能和2.0版本的B模塊一起使用。這時(shí)，用戶要是將1.0版本的B的實(shí)例傳給A，就會(huì)出現(xiàn)問(wèn)題。因此，需要一種機(jī)制，在模板安裝的時(shí)候提醒用戶，如果A和B一起安裝，那么B必須是2.0模塊。

peerDependencies字段就是用來(lái)供插件指定其所需要的主工具的版本。

"name": "chai-as-promised",
"peerDependencies": {
   "chai": "1.x"
}

上面代碼指定在安裝chai-as-promised模塊時(shí)，主程序chai必須一起安裝，而且chai的版本必須是1.x。如果項(xiàng)目指定的依賴是chai的2.0版本，就會(huì)報(bào)錯(cuò)。

需要注意，從npm 3.0版開(kāi)始，peerDependencies不再會(huì)默認(rèn)安裝了。

4. optionalDependencies

如果需要在找不到包或者安裝包失敗時(shí)，npm仍然能夠繼續(xù)運(yùn)行，則可以將該包放在optionalDependencies對(duì)象中，optionalDependencies對(duì)象中的包會(huì)覆蓋dependencies中同名的包，所以只需在一個(gè)地方進(jìn)行設(shè)置即可。

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

5. bundledDependencies

上面的幾個(gè)依賴相關(guān)的配置項(xiàng)都是一個(gè)對(duì)象，而bundledDependencies配置項(xiàng)是一個(gè)數(shù)組，數(shù)組里可以指定一些模塊，這些模塊將在這個(gè)包發(fā)布時(shí)被一起打包。

需要注意，這個(gè)字段數(shù)組中的值必須是在dependencies, devDependencies兩個(gè)里面聲明過(guò)的包才行。

6. engines

當(dāng)我們維護(hù)一些舊項(xiàng)目時(shí)，可能對(duì)npm包的版本或者Node版本有特殊要求，如果不滿足條件就可能無(wú)法將項(xiàng)目跑起來(lái)。為了讓項(xiàng)目開(kāi)箱即用，可以在engines字段中說(shuō)明具體的版本號(hào)：

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

需要注意：engines只是起一個(gè)說(shuō)明的作用，即使用戶安裝的版本不符合要求，也不影響依賴包的安裝。

四、腳本配置

1. scripts

scripts 是 package.json中內(nèi)置的腳本入口，是key-value鍵值對(duì)配置，key為可運(yùn)行的命令，可以通過(guò) npm run 來(lái)執(zhí)行命令。除了運(yùn)行基本的scripts命令，還可以結(jié)合pre和post完成前置和后續(xù)操作。

先來(lái)看一組scripts：

"scripts": {
 "dev": "node index.js",
  "predev": "node beforeIndex.js",
  "postdev": "node afterIndex.js"
}

這三個(gè)js文件中都有一句console：

// index.js
console.log("scripts: index.js")
// beforeIndex.js
console.log("scripts: before index.js")
// afterIndex.js
console.log("scripts: after index.js")

當(dāng)我們執(zhí)行npm run dev命令時(shí)，輸出結(jié)果如下：

scripts: before index.js
scripts: index.js
scripts: after index.js

可以看到，三個(gè)命令都執(zhí)行了，執(zhí)行順序是predev→dev→postdev。如果scripts命令存在一定的先后關(guān)系，則可以使用這三個(gè)配置項(xiàng)，分別配置執(zhí)行命令。

通過(guò)配置scripts屬性，可以定義一些常見(jiàn)的操作命令：

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "unit": "jest --config test/unit/jest.conf.js --coverage",
  "test": "npm run unit",
  "lint": "eslint --ext .js,.vue src test/unit",
  "build": "node build/build.js"
}

這些腳本是命令行應(yīng)用程序?？梢酝ㄟ^(guò)調(diào)用 npm run XXX 或 yarn XXX 來(lái)運(yùn)行它們，其中 XXX 是命令的名稱。 例如：npm run dev。我們可以為命令使用任何的名稱，腳本也可以是任何操作。

使用好該字段可以大大的提升開(kāi)發(fā)效率。

2. config

config字段用來(lái)配置scripts運(yùn)行時(shí)的配置參數(shù)，如下所示：

"config": {
 "port": 3000
}

如果運(yùn)行npm run start，則port字段會(huì)映射到npm_package_config_port環(huán)境變量中：

console.log(process.env.npm_package_config_port) // 3000

用戶可以通過(guò)npm config set foo:port 3001 命令來(lái)重寫port的值。

五、文件&目錄

下面來(lái)看看package.json中和文件以及目錄相關(guān)的屬性。

1. main

main 字段用來(lái)指定加載的入口文件，在 browser 和 Node 環(huán)境中都可以使用。如果我們將項(xiàng)目發(fā)布為npm包，那么當(dāng)使用 require 導(dǎo)入npm包時(shí)，返回的就是main字段所列出的文件的module.exports 屬性。如果不指定該字段，默認(rèn)是項(xiàng)目根目錄下的index.js。如果沒(méi)找到，就會(huì)報(bào)錯(cuò)。​

該字段的值是一個(gè)字符串：

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

2. browser

browser字段可以定義 npm 包在 browser 環(huán)境下的入口文件。如果 npm 包只在 web 端使用，并且嚴(yán)禁在 server 端使用，使用 browser 來(lái)定義入口文件。

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

3. module

module字段可以定義 npm 包的 ESM 規(guī)范的入口文件，browser 環(huán)境和 node 環(huán)境均可使用。如果 npm 包導(dǎo)出的是 ESM 規(guī)范的包，使用 module 來(lái)定義入口文件。

"module": "./src/index.mjs",

需要注意：.js 文件是使用 commonJS 規(guī)范的語(yǔ)法(require('xxx')) ，.mjs 是用 ESM 規(guī)范的語(yǔ)法(import 'xxx')。​

上面三個(gè)的入口入口文件相關(guān)的配置是有差別的，特別是在不同的使用場(chǎng)景下。在Web環(huán)境中，如果使用loader加載ESM（ES module），那么這三個(gè)配置的加載順序是browser→module→main，如果使用require加載CommonJS模塊，則加載的順序?yàn)?code>main→module→browser。​

Webpack在進(jìn)行項(xiàng)目構(gòu)建時(shí)，有一個(gè)target選項(xiàng)，默認(rèn)為Web，即構(gòu)建Web應(yīng)用。如果需要編譯一些同構(gòu)項(xiàng)目，如node項(xiàng)目，則只需將webpack.config.js的target選項(xiàng)設(shè)置為node進(jìn)行構(gòu)建即可。如果再Node環(huán)境中加載CommonJS模塊，或者ESM，則只有main字段有效。

4. bin

bin字段用來(lái)指定各個(gè)內(nèi)部命令對(duì)應(yīng)的可執(zhí)行文件的位置：

"bin": {
  "someTool": "./bin/someTool.js"
}

這里，someTool 命令對(duì)應(yīng)的可執(zhí)行文件為 bin 目錄下的 someTool.js，someTool.js會(huì)建立符號(hào)鏈接node_modules/.bin/someTool 。由于node_modules/.bin/目錄會(huì)在運(yùn)行時(shí)加入系統(tǒng)的PATH變量，因此在運(yùn)行npm時(shí)，就可以不帶路徑，直接通過(guò)命令來(lái)調(diào)用這些腳本。因此，下面的寫法可以簡(jiǎn)寫：

scripts: {  
  start: './node_modules/bin/someTool.js build'
}

// 簡(jiǎn)寫
scripts: {  
  start: 'someTool build'
}

所有node_modules/.bin/目錄下的命令，都可以用npm run [命令]的格式運(yùn)行。

上面的配置在package.json包中提供了一個(gè)映射到本地文件名的bin字段，之后npm包將鏈接這個(gè)文件到prefix/fix里面，以便全局引入?；蛘哝溄拥奖镜氐?code>node_modules/.bin/文件中，以便在本項(xiàng)目中使用。

5. files

files配置是一個(gè)數(shù)組，用來(lái)描述當(dāng)把npm包作為依賴包安裝時(shí)需要說(shuō)明的文件列表。當(dāng)npm包發(fā)布時(shí)，files指定的文件會(huì)被推送到npm服務(wù)器中，如果指定的是文件夾，那么該文件夾下面所有的文件都會(huì)被提交。

"files": [
    "LICENSE",
    "Readme.md",
    "index.js",
    "lib/"
 ]

如果有不想提交的文件，可以在項(xiàng)目根目錄中新建一個(gè).npmignore文件，并在其中說(shuō)明不需要提交的文件，防止垃圾文件推送到npm上。這個(gè)文件的形式和.gitignore類似。寫在這個(gè)文件中的文件即便被寫在files屬性里也會(huì)被排除在外。比如可以在該文件中這樣寫：

node_modules
.vscode

build

.DS_Store

6. man

man 命令是 Linux 中的幫助指令，通過(guò)該指令可以查看 Linux 中的指令幫助、配置文件幫助和編程幫助等信息。如果 node.js 模塊是一個(gè)全局的命令行工具，在 package.json 通過(guò) man 屬性可以指定 man 命令查找的文檔地址：

"man": [
 "./man/npm-access.1",
 "./man/npm-audit.1"
]

man 字段可以指定一個(gè)或多個(gè)文件, 當(dāng)執(zhí)行man {包名}時(shí), 會(huì)展現(xiàn)給用戶文檔內(nèi)容。

需要注意：

• man文件必須以數(shù)字結(jié)尾，如果經(jīng)過(guò)壓縮，還可以使用.gz后綴。這個(gè)數(shù)字表示文件安裝到哪個(gè) man 節(jié)中；如果 man 文件名稱不是以模塊名稱開(kāi)頭的，安裝的時(shí)候會(huì)加上模塊名稱前綴。
  

對(duì)于上面的配置，可以使用以下命令來(lái)執(zhí)行查看文檔：

man npm-access
man npm-audit

7. directories

directories字段用來(lái)規(guī)范項(xiàng)目的目錄。node.js 模塊是基于 CommonJS 模塊化規(guī)范實(shí)現(xiàn)的，需要嚴(yán)格遵循 CommonJS 規(guī)范。模塊目錄下除了必須包含包項(xiàng)目描述文件 package.json 以外，還需要包含以下目錄：

• bin ：存放可執(zhí)行二進(jìn)制文件的目錄
• lib ：存放js代碼的目錄
• doc ：存放文檔的目錄
• test ：存放單元測(cè)試用例代碼的目錄
• ...
  

在實(shí)際的項(xiàng)目目錄中，我們可能沒(méi)有按照這個(gè)規(guī)范進(jìn)行命名，那么就可以在directories字段指定每個(gè)目錄對(duì)應(yīng)的文件路徑：

"directories": {
    "bin": "./bin",
    "lib": "./lib",
    "doc": "./doc",
    "test" "./test",
    "man": "./man"
},

這個(gè)屬性實(shí)際上沒(méi)有什么實(shí)際的作用，當(dāng)然不排除未來(lái)會(huì)有什么比較有意義的用處。

六、發(fā)布配置

下面來(lái)看看和npm項(xiàng)目包發(fā)布相關(guān)的配置。

1. private

private字段可以防止我們意外地將私有庫(kù)發(fā)布到npm服務(wù)器。只需要將該字段設(shè)置為true：

"private": true

2. preferGlobal

preferGlobal字段表示當(dāng)用戶不把該模塊安裝為全局模塊時(shí)，如果設(shè)置為true就會(huì)顯示警告。它并不會(huì)真正的防止用戶進(jìn)行局部的安裝，只是對(duì)用戶進(jìn)行提示，防止產(chǎn)生誤解：

"preferGlobal": true

3. publishConfig

publishConfig配置會(huì)在模塊發(fā)布時(shí)生效，用于設(shè)置發(fā)布時(shí)一些配置項(xiàng)的集合。如果不想模塊被默認(rèn)標(biāo)記為最新，或者不想發(fā)布到公共倉(cāng)庫(kù)，可以在這里配置tag或倉(cāng)庫(kù)地址。更詳細(xì)的配置可以參考 npm-config。​

通常情況下，publishConfig會(huì)配合private來(lái)使用，如果只想讓模塊發(fā)布到特定npm倉(cāng)庫(kù)，就可以這樣來(lái)配置：

"private": true,
"publishConfig": {
  "tag": "1.1.0",
  "registry": "https://registry.npmjs.org/",
  "access": "public"
}

4. os

os字段可以讓我們?cè)O(shè)置該npm包可以在什么操作系統(tǒng)使用，不能再什么操作系統(tǒng)使用。如果我們希望開(kāi)發(fā)的npm包只運(yùn)行在linux，為了避免出現(xiàn)不必要的異常，建議使用Windows系統(tǒng)的用戶不要安裝它，這時(shí)就可以使用os配置：

"os" ["linux"]   // 適用的操作系統(tǒng)
"os" ["!win32"]  // 禁用的操作系統(tǒng)

5. cpu

該配置和OS配置類似，用CPU可以更準(zhǔn)確的限制用戶的安裝環(huán)境：

"cpu" ["x64", "AMD64"]   // 適用的cpu
"cpu" ["!arm", "!mips"]  // 禁用的cpu

可以看到，黑名單和白名單的區(qū)別就是，黑名單在前面加了一個(gè)“!”。

6. license

license 字段用于指定軟件的開(kāi)源協(xié)議，開(kāi)源協(xié)議表述了其他人獲得代碼后擁有的權(quán)利，可以對(duì)代碼進(jìn)行何種操作，何種操作又是被禁止的。

常見(jiàn)的協(xié)議如下：

• MIT ：只要用戶在項(xiàng)目副本中包含了版權(quán)聲明和許可聲明，他們就可以拿你的代碼做任何想做的事情，你也無(wú)需承擔(dān)任何責(zé)任。
• Apache ：類似于 MIT ，同時(shí)還包含了貢獻(xiàn)者向用戶提供專利授權(quán)相關(guān)的條款。
• GPL ：修改項(xiàng)目代碼的用戶再次分發(fā)源碼或二進(jìn)制代碼時(shí)，必須公布他的相關(guān)修改。
  

可以這樣來(lái)聲明該字段：

"license": "MIT"

七、第三方配置

package.json 文件還可以承載命令特有的配置，例如 Babel、ESLint 等。它們每個(gè)都有特有的屬性，例如 eslintConfig、babel 等。 它們是命令特有的，可以在相應(yīng)的命令/項(xiàng)目文檔中找到如何使用它們。下面來(lái)看幾個(gè)常用的第三方配置項(xiàng)。

1. typings

typings字段用來(lái)指定TypeScript的入口文件：

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

該字段的作用和main配置相同。

2. eslintConfig

eslint的配置可以寫在單獨(dú)的配置文件.eslintrc.json 中，也可以寫在package.json文件的eslintConfig配置項(xiàng)中。

"eslintConfig": {
      "root": true,
      "env": {
        "node": true
      },
      "extends": [
        "plugin:vue/essential",
        "eslint:recommended"
      ],
      "rules": {},
      "parserOptions": {
        "parser": "babel-eslint"
     },
}

3. babel

babel用來(lái)指定Babel的編譯配置，代碼如下：

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

4. unpkg

使用該字段可以讓 npm 上所有的文件都開(kāi)啟 cdn 服務(wù)，該CND服務(wù)由unpkg提供：

"unpkg": "dist/vue.js"

5. lint-staged

lint-staged是一個(gè)在Git暫存文件上運(yùn)行linters的工具，配置后每次修改一個(gè)文件即可給所有文件執(zhí)行一次lint檢查，通常配合gitHooks一起使用。

"lint-staged": {
 "*.js": [
   "eslint --fix",
    "git add"
  ]
}

使用lint-staged時(shí)，每次提交代碼只會(huì)檢查當(dāng)前改動(dòng)的文件。

6. gitHooks

gitHooks用來(lái)定義一個(gè)鉤子，在提交（commit）之前執(zhí)行ESlint檢查。在執(zhí)行l(wèi)int命令后，會(huì)自動(dòng)修復(fù)暫存區(qū)的文件。修復(fù)之后的文件并不會(huì)存儲(chǔ)在暫存區(qū)，所以需要用git add命令將修復(fù)后的文件重新加入暫存區(qū)。在執(zhí)行pre-commit命令之后，如果沒(méi)有錯(cuò)誤，就會(huì)執(zhí)行g(shù)it commit命令：

"gitHooks": {
 "pre-commit": "lint-staged"
}

這里就是配合上面的lint-staged來(lái)進(jìn)行代碼的檢查操作。

7. browserslist

browserslist字段用來(lái)告知支持哪些瀏覽器及版本。Babel、Autoprefixer 和其他工具會(huì)用到它，以將所需的 polyfill 和 fallback 添加到目標(biāo)瀏覽器。比如最上面的例子中的該字段值：

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

這里指定了一個(gè)對(duì)象，里面定義了生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境的瀏覽器要求。上面的development就是指定開(kāi)發(fā)環(huán)境中支持最后一個(gè)版本的chrome、Firefox、safari瀏覽器。這個(gè)屬性是不同的前端工具之間共用目標(biāo)瀏覽器和 node 版本的配置工具，被很多前端工具使用，比如Babel、Autoprefixer等。

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

最新評(píng)論