本篇文章帶大家了解一下node項目中的package.json配置文件，聊聊package.json中一些常見配置屬性、環境相關屬性、依賴相關屬性和三方屬性，希望對大家有所幫助！

npm是前端開發人員廣泛使用的包管理工具，項目中通過package.json來管理項目中所依賴的npm包的配置。package.json就是一個json文件，除了能夠描述項目的包依賴外，允許我們使用“語義化版本規則”指明你項目依賴包的版本，讓你的構建更好地與其他開發者分享，便于重復使用。 本文主要從最近的實踐出發，結合最新的npm和node的版本，介紹一下package.json中一些常見的配置以及如何寫一個規范的package.json

一、package.json

1. package.json簡介

在nodejs項目中，package.json是管理其依賴的配置文件，通常我們在初始化一個nodejs項目的時候會通過：

npm init

然后在你的目錄下會生成3個目錄/文件， node_modules, package.json和 package.lock.json。其中package.json的內容為：

{     "name": "Your project name",     "version": "1.0.0",     "description": "Your project description",     "main": "app.js",     "scripts": {         "test": "echo "Error: no test specified" && exit 1",     },     "author": "Author name",     "license": "ISC",     "dependencies": {         "dependency1": "^1.4.0",         "dependency2": "^1.5.2"     } }

上述可以看出，package.json中包含了項目本身的元數據,以及項目的子依賴信息(比如dependicies等)。

2. package-lock.json

我們發現在npm init的時候，不僅生成了package.json文件，還生成了package-lock.json文件。那么為什么存在package.json的清空下，還需要生成package-lock.json文件呢。本質上package-lock.json文件是為了鎖版本，在package.json中指定的子npm包比如：react: "^16.0.0"，在實際安裝中，只要高于react的版本都滿足package.json的要求。這樣就使得根據同一個package.json文件，兩次安裝的子依賴版本不能保證一致。

而package-lock文件如下所示，子依賴dependency1就詳細的指定了其版本。起到lock版本的作用。

{     "name": "Your project name",     "version": "1.0.0",     "lockfileVersion": 1,     "requires": true,     "dependencies": {         "dependency1": {             "version": "1.4.0",             "resolved":  "https://registry.npmjs.org/dependency1/-/dependency1-1.4.0.tgz",             "integrity":  "sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA=="         },         "dependency2": {             "version": "1.5.2",             "resolved":  "https://registry.npmjs.org/dependency2/-/dependency2-1.5.2.tgz",             "integrity":  "sha512-WOn21V8AhyE1QqVfPIVxe3tupJacq1xGkPTB4iagT6o+P2cAgEOOwIxMftr4+ZCTI6d551ij9j61DFr0nsP2uQ=="         }     } }

二、package.json常用屬性

本章來聊聊package.json中常用的配置屬性，形如name，version等屬性太過簡單，不一一介紹。本章主要介紹一下script、bin和workspaces屬性。

2.1 script

在npm中使用script標簽來定義腳本，每當制定npm run的時候，就會自動創建一個shell腳本，這里需要注意的是，npm run新建的這個 Shell，會將本地目錄的node_modules/.bin子目錄加入PATH變量。

這意味著，當前目錄的node_modules/.bin子目錄里面的所有腳本，都可以直接用腳本名調用，而不必加上路徑。比如，當前項目的依賴里面有 esbuild，只要直接寫esbuild xxx 就可以了。

{   // ...   "scripts": {     "build": "esbuild index.js",   } }

{   // ...   "scripts": {     "build": "./node_modules/.bin/esbuild index.js"    } }

上面兩種寫法是等價的。

2.2 bin

bin屬性用來將可執行文件加載到全局環境中，指定了bin字段的npm包，一旦在全局安裝，就會被加載到全局環境中，可以通過別名來執行該文件。

比如@bytepack/cli的npm包：

"bin": {     "bytepack": "./bin/index.js"  },

一旦在全局安裝了@bytepack/cli，就可以直接通過bytepack來執行相應的命令，比如

bytepack -v //顯示1.11.0

如果非全局安裝，那么會自動連接到項目的node_module/.bin目錄中。與前面介紹的script標簽中所說的一致，可以直接用別名來使用。

2.3 workspaces

在項目過大的時候，最近越來越流行monorepo。提到monorepo就繞不看workspaces，早期我們會用yarn workspaces，現在npm官方也支持了workspaces. workspaces解決了本地文件系統中如何在一個頂層root package下管理多個子packages的問題，在workspaces聲明目錄下的package會軟鏈到最上層root package的node_modules中。

直接以官網的例子來說明：

{   "name": "my-project",   "workspaces": [     "packages/a"   ] }

在一個npm包名為my-project的npm包中，存在workspaces配置的目錄。

. +-- package.json +-- index.js `-- packages    +-- a    |  `-- package.json

并且該最上層的名為my-project的root包，有packages/a子包。此時，我們如果npm install,那么在root package中node_modules中安裝的npm包a，指向的是本地的package/a.

. +-- node_modules |  `-- packages/a -> ../packages/a +-- package-lock.json +-- package.json `-- packages    +-- a    |   `-- package.json

上述的

-- packages/a -> ../packages/a

指的就是從node_modules中a鏈接到本地npm包的軟鏈

三、package.json環境相關屬性

常見的環境，基本上分為瀏覽器browser和node環境兩大類，接下來我們來看看package.json中，跟環境相關的配置屬性。環境的定義可以簡單理解如下：

• browser環境：比如存在一些只有在瀏覽器中才會存在的全局變量等，比如window，Document等
• node環境: npm包的源文件中存在只有在node環境中才會有的一些變量和內置包，內置函數等。

3.1 type

js的模塊化規范包含了commonjs、CMD、UMD、AMD和ES module等，最早先在node中支持的僅僅是commonjs字段，但是從node13.2.0開始后，node正式支持了ES module規范，在package.json中可以通過type字段來聲明npm包遵循的模塊化規范。

//package.json {    name: "some package",    type: "module"||"commonjs"  }

需要注意的是：

• 不指定type的時候，type的默認值是commonjs，不過建議npm包都指定一下type

• 當type字段指定值為module則采用ESModule規范

• 當type字段指定時，目錄下的所有.js后綴結尾的文件，都遵循type所指定的模塊化規范

• 除了type可以指定模塊化規范外，通過文件的后綴來指定文件所遵循的模塊化規范，以.mjs結尾的文件就是使用的ESModule規范，以.cjs結尾的遵循的是commonjs規范

3.2 main & module & browser

除了type外，package.json中還有main,module和browser 3個字段來定義npm包的入口文件。

• main : 定義了 npm 包的入口文件，browser 環境和 node 環境均可使用
• module : 定義 npm 包的 ESM 規范的入口文件，browser 環境和 node – 環境均可使用
• browser : 定義 npm 包在 browser 環境下的入口文件

我們來看一下這3個字段的使用場景，以及同時存在這3個字段時的優先級。我們假設有一個npm包為demo1,

----- dist    |-- index.browser.js    |-- index.browser.mjs    |-- index.js    |-- index.mjs

其package.json中同時指定了main,module和browser這3個字段，

  "main": "dist/index.js",  // main    "module": "dist/index.mjs", // module    // browser 可定義成和 main/module 字段一一對應的映射對象，也可以直接定義為字符串   "browser": {     "./dist/index.js": "./dist/index.browser.js", // browser+cjs     "./dist/index.mjs": "./dist/index.browser.mjs"  // browser+mjs   },    // "browser": "./dist/index.browser.js" // browser

默認構建和使用，比如我們在項目中引用這個npm包：

import demo from 'demo'

通過構建工具構建上述代碼后，模塊的加載循序為：

browser+mjs > module > browser+cjs > main

這個加載順序是大部分構建工具默認的加載順序，比如webapck、esbuild等等。可以通過相應的配置修改這個加載順序，不過大部分場景，我們還是會遵循默認的加載順序。

3.3 exports

如果在package.json中定義了exports字段，那么這個字段所定義的內容就是該npm包的真實和全部的導出，優先級會高于main和file等字段。

舉例來說：

{   "name": "pkg",   "exports": {     ".": "./main.mjs",     "./foo": "./foo.js"   } }

import { something } from "pkg"; // from "pkg/main.mjs"

const { something } = require("pkg/foo"); // require("pkg/foo.js")

從上述的例子來看，exports可以定義不同path的導出。如果存在exports后，以前正常生效的file目錄到處會失效，比如require('pkg/package.json')，因為在exports中沒有指定，就會報錯。

exports還有一個最大的特點，就是條件引用，比如我們可以根據不同的引用方式或者模塊化類型，來指定npm包引用不同的入口文件。

// package.json {    "name":"pkg",   "main": "./main-require.cjs",   "exports": {     "import": "./main-module.js",     "require": "./main-require.cjs"   },   "type": "module" }

上述的例子中，如果我們通過

const p = require('pkg')

引用的就是"./main-require.cjs"。

如果通過：

import p from 'pkg'

引用的就是"./main-module.js"

最后需要注意的是 ：如果存在exports屬性，exports屬性不僅優先級高于main，同時也高于module和browser字段。

三、package.json依賴相關屬性

package.json中跟依賴相關的配置屬性包含了dependencies、devDependencies、peerDependencies和peerDependenciesMeta等。

dependencies是項目的依賴，而devDependencies是開發所需要的模塊，所以我們可以在開發過程中需要的安裝上去，來提高我們的開發效率。這里需要注意的時，在自己的項目中盡量的規范使用，形如webpack、babel等是開發依賴，而不是項目本身的依賴，不要放在dependencies中。

dependencies除了dependencies和devDependencies，本文重點介紹的是peerDependencies和peerDependenciesMeta。

3.1 peerDependencies

peerDependencies是package.json中的依賴項,可以解決核心庫被下載多次，以及統一核心庫版本的問題。

//package/pkg ----- node_modules    |-- npm-a -> 依賴了react,react-dom    |-- npm-b -> 依賴了react,react-dom    |-- index.js

比如上述的例子中如果子npm包a,b都以來了react和react-dom,此時如果我們在子npm包a,b的package.json中聲明了PeerDependicies后，相應的依賴就不會重新安裝。

需要注意的有兩點：

• 對于子npm包a,在npm7中，如果單獨安裝子npm a,其peerDependicies中的包，會被安裝下來。但是npm7之前是不會的。
• 請規范和詳細的指定PeerDependicies的配置，筆者在看到有些react組件庫，不在PeerDependicies中指定react和react-dom，或者將react和react-dom放到了dependicies中，這兩種不規范的指定都會存在一些問題。
• 其二，正確的指定PeerDependicies中npm包的版本，react-focus-lock@2.8.1,peerDependicies指定的是："react": "^16.8.0 || ^17.0.0 || ^18.0.0"，但實際上，這個react-focus-lock并不支持18.x的react

3.2 peerDependenciesMeta

看到“Meta”就有元數據的意思，這里的peerDependenciesMeta就是詳細修飾了peerDependicies，比如在react-redux這個npm包中的package.json中有這么一段：

 "peerDependencies": {     "react": "^16.8.3 || ^17 || ^18"   },  "peerDependenciesMeta": {     "react-dom": {       "optional": true     },     "react-native": {       "optional": true     }   }

這里指定了"react-dom","react-native"在peerDependenciesMeta中，且為可選項，因此如果項目中檢測沒有安裝"react-dom"和"react-native"都不會報錯。

值得注意的是，通過peerDependenciesMeta我們確實是取消了限制，但是這里經常存在非A即B的場景，比如上述例子中，我們需要的是“react-dom”和"react-native"需要安裝一個，但是實際上通過上述的聲明，我們實現不了這種提示。

四、package.json三方屬性

package.json中也存在很多三方屬性，比如tsc中使用的types、構建工具中使用的sideEffects,git中使用的husky，eslint使用的eslintIgnore，這些擴展的配置，針對特定的開發工具是有意義的這里不一一舉例。