博客 / 詳情

返回

package.json，你知道多少？

今天來看看前端的大管家package.json文件相關的配置，充分了解這些配置有助於我們提高開發的效率，規範我們的項目。
在每個前端項目中，都有package.json文件，它是項目的配置文件，常見的配置有配置項目啓動、打包命令，聲明依賴包等。package.json文件是一個JSON對象，該對象的每一個成員就是當前項目的一項設置。
當我們搭建一個新項目時，往往腳手架就幫我們初始化好了一個package.jaon配置文件，它位於項目的根目錄中。

{
  "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"
    ]
  }
}

當我們克隆一個新的項目到本地時，需要執行npm install（yarn install）命令來安裝項目所需的依賴文件。當執行該命令時，就會根據package.json文件中的配置信息來自動下載所需的模塊，也就是配置項目所需的運行和開發環境。
image.png

  1. 必須屬性
    package.json中最重要的兩個字段就是name和version，它們都是必須的，如果沒有，就無法正常執行npm install命令。npm規定package.json文件是由名稱和版本號作為唯一標識符的。
    name
    name很容易理解，就是項目的名稱，它是一個字符串。在給name字段命名時，需要注意以下幾點：
    名稱的長度必須小於或等於214個字符，不能以“.”和“_”開頭，不能包含大寫字母（這是因為當軟件包在npm上發佈時，會基於此屬性獲得自己的URL，所以不能包含非URL安全字符（non-url-safe））；
    名稱可以作為參數被傳入require("")，用來導入模塊，所以應當儘可能的簡短、語義化；
    名稱不能和其他模塊的名稱重複，可以使用npm view命令查詢模塊明是否重複，如果不重複就會提示404：
    image.png
    version
    version字段表示該項目包的版本號，它是一個字符串。在每次項目改動後，即將發佈時，都要同步的去更改項目的版本號。版本號的使用規範如下：
    版本號的命名遵循語義化版本2.0.0規範，格式為：主版本號.次版本號.修訂號，通常情況下，修改主版本號是做了大的功能性的改動，修改次版本號是新增了新功能，修改修訂號就是修復了一些bug；
    如果某個版本的改動較大，並且不穩定，可能如法滿足預期的兼容性需求，就需要發佈先行版本，先行版本通過會加在版本號的後面，通過“-”號連接以點分隔的標識符和版本編譯信息：內部版本（alpha）、公測版本（beta）和候選版本（rc，即release candiate）。

  2. 描述信息
    package.jaon中有五個和項目包描述信息相關的配置字段，下面就分別來看看這些字段的含義。
    description
    description字段用來描述這個項目包，它是一個字符串，可以讓其他開發者在 npm 的搜索中發現我們的項目包。
    keywords
    keywords字段是一個字符串數組，表示這個項目包的關鍵詞。和description一樣，都是用來增加項目包的曝光率的。
    author
    author顧名思義就是作者，表示該項目包的作者。它有兩種形式，一種是字符串格式：

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

    另一種是對象形式：

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

    contributors
    contributors表示該項目包的貢獻者，和author不同的是，該字段是一個數組，包含所有的貢獻者。
    homepage
    homepage就是項目的主頁地址了，它是一個字符串。
    repository
    repository表示代碼的存放倉庫地址。
    bugs
    bugs表示項目提交問題的地址，該字段是一個對象，可以添加一個提交問題的地址和反饋的郵箱。

  3. 依賴配置
    通常情況下，我們的項目會依賴一個或者多個外部的依賴包，根據依賴包的不同用途，可以將他們配置在下面的五個屬性下：dependencies、devDependencies、peerDependencies、bundledDependencies、optionalDependencies 。
    dependencies
    字段中聲明的是項目的生產環境中所必須的依賴包。當使用 npm 或 yarn 安裝npm包時，該npm包會被自動插入到此配置項中。
    devDependencies
    聲明的是開發階段需要的依賴包，如Webpack、Eslint、Babel等，用於輔助開發。它們不同於 dependencies，因為它們只需安裝在開發設備上，而無需在生產環境中運行代碼。當打包上線時並不需要這些包，所以可以把這些依賴添加到 devDependencies 中，這些依賴依然會在本地指定 npm install 時被安裝和管理，但是不會被安裝到生產環境中。
    peerDependencies
    有些情況下，我們的項目和所依賴的模塊，都會同時依賴另一個模塊，但是所依賴的版本不一樣。比如，我們的項目依賴A模塊和B模塊的1.0版，而A模塊本身又依賴B模塊的2.0版。大多數情況下，這不是問題，B模塊的兩個版本可以並存，同時運行。但是，有一種情況，會出現問題，就是這種依賴關係將暴露給用户。
    最典型的場景就是插件，比如A模塊是B模塊的插件。用户安裝的B模塊是1.0版本，但是A插件只能和2.0版本的B模塊一起使用。這時，用户要是將1.0版本的B的實例傳給A，就會出現問題。因此，需要一種機制，在模板安裝的時候提醒用户，如果A和B一起安裝，那麼B必須是2.0模塊。
    optionalDependencies
    如果需要在找不到包或者安裝包失敗時，npm仍然能夠繼續運行，則可以將該包放在optionalDependencies對象中，optionalDependencies對象中的包會覆蓋dependencies中同名的包，所以只需在一個地方進行設置即可。
    bundledDependencies
    上面的幾個依賴相關的配置項都是一個對象，而bundledDependencies配置項是一個數組，數組裏可以指定一些模塊，這些模塊將在這個包發佈時被一起打包。
    需要注意，這個字段數組中的值必須是在dependencies, devDependencies兩個裏面聲明過的包才行。
    engines
    當我們維護一些舊項目時，可能對npm包的版本或者Node版本有特殊要求，如果不滿足條件就可能無法將項目跑起來。為了讓項目開箱即用，可以在engines字段中説明具體的版本號。

  4. 腳本配置
    scripts
    是 package.json中內置的腳本入口，是key-value鍵值對配置，key為可運行的命令，可以通過 npm run 來執行命令。除了運行基本的scripts命令，還可以結合pre和post完成前置和後續操作。先來看一組scripts：

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

    通過配置scripts屬性，可以定義一些常見的操作命令：

    "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"
}

    這些腳本是命令行應用程序。可以通過調用 npm run XXX 或 yarn XXX 來運行它們，其中 XXX 是命令的名稱。例如：npm run dev。我們可以為命令使用任何的名稱，腳本也可以是任何操作。
    config
    字段用來配置scripts運行時的配置參數，如果運行npm run start，則port字段會映射到npm_package_config_port環境變量中。如下所示：

    "config": {
 "port": 3000
}
console.log(process.env.npm_package_config_port) // 3000

  5. 文件&目錄
    main
    字段用來指定加載的入口文件，在 browser 和 Node 環境中都可以使用。如果我們將項目發佈為npm包，那麼當使用 require 導入npm包時，返回的就是main字段所列出的文件的module.exports 屬性。如果不指定該字段，默認是項目根目錄下的index.js。如果沒找到，就會報錯。
    browser
    字段可以定義 npm 包在 browser 環境下的入口文件。如果 npm 包只在 web 端使用，並且嚴禁在 server 端使用，使用 browser 來定義入口文件。
    module
    字段可以定義 npm 包的 ESM 規範的入口文件，browser 環境和 node 環境均可使用。如果 npm 包導出的是 ESM 規範的包，使用 module 來定義入口文件。
    bin
    字段用來指定各個內部命令對應的可執行文件的位置：

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

    這裏，someTool 命令對應的可執行文件為 bin 目錄下的 someTool.js，someTool.js會建立符號鏈接node_modules/.bin/someTool。由於node_modules/.bin/目錄會在運行時加入系統的PATH變量，因此在運行npm時，就可以不帶路徑，直接通過命令來調用這些腳本。因此，下面的寫法可以簡寫：

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

    上面的配置在package.json包中提供了一個映射到本地文件名的bin字段，之後npm包將鏈接這個文件到prefix/fix裏面，以便全局引入。或者鏈接到本地的node_modules/.bin/文件中，以便在本項目中使用。
    files
    配置是一個數組，用來描述當把npm包作為依賴包安裝時需要説明的文件列表。當npm包發佈時，files指定的文件會被推送到npm服務器中，如果指定的是文件夾，那麼該文件夾下面所有的文件都會被提交。
    man
    命令是 Linux 中的幫助指令，通過該指令可以查看 Linux 中的指令幫助、配置文件幫助和編程幫助等信息。如果 node.js 模塊是一個全局的命令行工具，在 package.json 通過 man 屬性可以指定 man 命令查找的文檔地址
    directories
    字段用來規範項目的目錄。node.js 模塊是基於 CommonJS 模塊化規範實現的，需要嚴格遵循 CommonJS 規範。模塊目錄下除了必須包含包項目描述文件 package.json 以外。

  6. 發佈配置
    private
    字段可以防止我們意外地將私有庫發佈到npm服務器。只需要將該字段設置為true。
    preferGlobal
    字段表示當用户不把該模塊安裝為全局模塊時，如果設置為true就會顯示警告。它並不會真正的防止用户進行局部的安裝，只是對用户進行提示，防止產生誤解。
    publishConfig
    配置會在模塊發佈時生效，用於設置發佈時一些配置項的集合。如果不想模塊被默認標記為最新，或者不想發佈到公共倉庫，可以在這裏配置tag或倉庫地址。更詳細的配置可以參考 npm-config。
    os
    字段可以讓我們設置該npm包可以在什麼操作系統使用，不能再什麼操作系統使用。如果我們希望開發的npm包只運行在linux，為了避免出現不必要的異常，建議使用Windows系統的用户不要安裝它，這時就可以使用os配置
    cpu
    該配置和OS配置類似，用CPU可以更準確的限制用户的安裝環境：
    license
    字段用於指定軟件的開源協議，開源協議表述了其他人獲得代碼後擁有的權利，可以對代碼進行何種操作，何種操作又是被禁止的。常見的協議如下：
    MIT ：只要用户在項目副本中包含了版權聲明和許可聲明，他們就可以拿你的代碼做任何想做的事情，你也無需承擔任何責任。
    Apache ：類似於 MIT ，同時還包含了貢獻者向用户提供專利授權相關的條款。
    GPL ：修改項目代碼的用户再次分發源碼或二進制代碼時，必須公佈他的相關修改。
  7. 第三方配置
    typings
    字段用來指定TypeScript的入口文件。
    eslint
    的配置可以寫在單獨的配置文件.eslintrc.json 中，也可以寫在package.json文件的eslintConfig配置項中。
    babel
    用來指定Babel的編譯配置
    unpkg
    使用該字段可以讓 npm 上所有的文件都開啓 cdn 服務，該CND服務由unpkg提供
    lint-staged
    是一個在Git暫存文件上運行linters的工具，配置後每次修改一個文件即可給所有文件執行一次lint檢查，通常配合gitHooks一起使用。
    gitHooks
    用來定義一個鈎子，在提交（commit）之前執行ESlint檢查。在執行lint命令後，會自動修復暫存區的文件。修復之後的文件並不會存儲在暫存區，所以需要用git add命令將修復後的文件重新加入暫存區。在執行pre-commit命令之後，如果沒有錯誤，就會執行git commit命令
    browserslist
    字段用來告知支持哪些瀏覽器及版本。Babel、Autoprefixer 和其他工具會用到它，以將所需的 polyfill 和 fallback 添加到目標瀏覽器。
package.json , 前端
user avatar
0 位用戶收藏了這個故事！

發佈 評論

Some HTML is okay.