🔥🔥 前端必知必會 | 一文快速掌握package.json

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰node

前言

在每一個node項目或者模塊的根目錄下，一般會有一個叫作package.json文件，它定義了這個項目所須要的各個模塊信息和版本，以及整個項目的配置信息，例如項目的名稱，版本，描述等等信息...react

大多數的開發者對package.json的瞭解只是在：webpack

項目名稱、構建版本、許可證的設置
在script中優化運行腳本
項目依賴記錄

其實，package.json的做用在此只是冰山一角，咱們還能夠配置更多的屬性來實現更多的功能，下面咱們將帶你深刻認識package.json。git

簡單的package.json

咱們經過npm init命令來初始化一個node模塊，看看它的package.json文件。（package.json文件能夠手寫出來）github

{
  # 項目名稱
  "name": "island",
  # 項目版本
  "version": "1.0.0",
  # 項目描述
  "description": "",
  # 入口文件
  "main": "index.js",
  # 腳本
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  # 做者
  "author": "QC2168",
  # 許可證
  "license": "ISC"
}
複製代碼

屬性說明

必備屬性

在package.json中能夠配置不少的屬性，其中name和version屬性是必不可少的，這兩個屬性是npm模塊的惟一標識。web

name

設置模塊的名稱，用於告知模塊的名稱。shell

命名規則
- 名稱必須少於 214 個字符，且不能包含空格，只能包含小寫字母、連字符（-）或下劃線（_）。
- 不能以點（.）或下劃線（_）開頭。
- 名稱中不得包含大寫字母。
- 必須僅使用URL安全字符。

{
	"name": "island"
}
複製代碼

version

設置你的模塊版本號，此屬性遵循版本的語義版本控制記法，這意味着版本始終以 3 個數字表示：x.x.x。express

版本格式：主版本號.次版本號.修訂號，版本號遞增規則以下：
- 主版本號：當你作了不兼容的 API 修改
- 次版本號：當你作了向下兼容的功能性新增
- 修訂號：當你作了向下兼容的問題修正
先行版本號及版本編譯信息能夠加到「主版本號.次版本號.修訂號」的後面，做爲延伸

詳細請閱讀語義化版本 2.0.0：semver.org/lang/zh-CN/npm

{
  "author": "QC2168"
}
複製代碼

關於描述信息

keywords

該屬性是設置模塊中的關鍵詞，當咱們使用npm檢索模塊時，會對模塊中的description字段和keywords字段進行匹配，寫好 package.json中的 description 和 keywords 將有利於增長咱們模塊的曝光率。若是你沒有打算髮布到npm，能夠忽略這個屬性json

{
	"keywords": ["server", "osiolabs", "express", "compression"]
}
複製代碼

description

該屬性填寫的是對該模塊的描述內容，方便於用戶瞭解這個模塊。同時，包管理器也會把這個值做爲搜索的關鍵詞

{
	"description": "感謝你的閱讀，動動你的小手來個贊"
}
複製代碼

關於協議

license

該屬性是設定模塊的許可證，讓用戶瞭解它們是在什麼受權下使用此包，以及還有哪一些限制條件，例如MIT開源，很寬鬆的協議，基本上你什麼均可以幹，只要保留做者版權便可。

{
	"license": "MIT"
}
複製代碼

engines

該屬性是告知開發者此項目 / 模塊要運行的 Node.js 或其餘命令的版本。

"engines": {
  "node": ">= 6.0.0",
  "npm": ">= 3.0.0",
  "yarn": "^0.13.0"
}
複製代碼

關於維護 / 開發

author

設置模塊的做者名稱，你能夠以字符串 / 對象的形式填寫，以對象形式填寫能夠填寫更多關於做者的詳細信息。

{
  "author": "QC2168"
}

or

{
  "name": "QC2168",
  "GitHub": "https://github.com/QC2168"
}
複製代碼

contributors

你還能夠在你的模塊中配置其餘貢獻者的信息，contributors是一個數組類型的屬性，你能夠以字符串 / 對象形式存放貢獻者的信息。

{
  "contributors": ["QC2168"]
}

or

{
  "contributors": [
    {
      "name": "QC2168",
      "GitHub": "https://github.com/QC2168"
    }
  ]
}
複製代碼

關於程序

main

該屬性設置模塊的入口位置，當項目導入模塊時，應用程序會在該位置搜索模塊導出。

一般是項目根目錄下的index.js文件

{
	"main": "src/index.js"
}
複製代碼

關於發佈配置

private

該屬性是設置該模塊是否能夠被髮布到npm中，一般咱們會將非開源的項目把這個屬性設置爲true，可防止模塊被意外發布的事情發生。

{
	"private": "true"
}
複製代碼

files

該屬性是用於當咱們執行npm publish時，只發布的目錄或者文件（如下寫法指的是隻發佈dist目錄下的文件）。

"files": [
    "dist/"
  ],
複製代碼

關於腳本任務

scripts

定義一組npm腳本，每次執行 npm run，就會新建一個 shell，而後在裏面執行制定的腳本命令。

"scripts": {
    "watch": "webpack --watch",
    "build": "webpack --config webpack.build.config.ts",
    "start": "webpack serve --config webpack.dev.config.ts"
  },
複製代碼

config

該屬性用於配置腳本中使用的環境變量，用於腳本命令中，例以下面的配置，能夠在腳本中使用process.env.npm_package_config_port進行獲取。

{
  "config" : { "port" : "8080" }
}
複製代碼

關於依賴包

dependencies

設置做爲依賴安裝的 npm 模塊的列表。

npm install <模塊名>
yarn add <模塊名>
複製代碼

當你使用 npm / yarn 安裝軟件模塊時，模塊名會自動被插入到package.json的dependencies屬性裏。

"dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
複製代碼

devDependencies

設置做爲開發依賴安裝的 npm 軟件包的列表。

它們不一樣於 dependencies，由於它們只需安裝在開發機器上，而無需在生產環境中運行代碼。

npm install --save-dev <模塊名>
yarn add --dev <模塊名>
複製代碼

當你使用 npm / yarn 安裝軟件模塊時，模塊名會自動被插入到package.json的devDependencies屬性裏。

"devDependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
}
複製代碼

總結

本文介紹了package.json中的大部分屬性和做用，並將其分類。同時，package.json是一個Node項目的核心文件，它記錄了關於整個Node項目所須要的重要信息，也是Node項目中必不可少的文件。