package.json詳解

前言

簡述寫這篇文章的緣由：

寫這篇文章是由於前段時間有人問我，她在面試中面試官問了她，是否瞭解package.json中的版本問題？安裝模塊的~、>、^等表明什麼意思？她跟我說，平時只是用項目中的npm start啓動或者構建項目，真沒有一個個瞭解這麼多，當時心態就崩了o(╥﹏╥)oo(╥﹏╥)o，後面面試也沒能答好。

我給的建議就是，在面試中或者平時遇到難題這都很正常，前端問題不少很難都面面俱到，都是一個成長的過程，這個時候咱們就實話說，說沒有具體瞭解，回去後我去補補這方面的知識，或者去請教面試官，都是能夠的，也不會由於這一個問題就pass你。面試官會考察這方便的問題，一方面是根據本身業務中遇到過這些問題，還有就是考察面試者掌握前端的基礎和深度廣度，咱們真不知道的時候，傳達給面試官咱們有學習的探索精神。

目標：你從本文能夠學到什麼？

• 一、關於npm
• 二、package.json是什麼？
• 三、如何建立package.json
• 四、全局安裝和本地安裝究竟是怎麼區分的？
• 五、安裝、更新、卸載模塊
• 六、package.json中模塊的版本^2.0.0``~2.0.0等 （安裝版本使用到@表示什麼意思？npm install jquery@3.4.1）
• 七、package.json中每一個字段的詳解
• 八、版本號version的意義，如，大更新、增長一些功能上線、修補一些小布丁的上線，咱們改怎麼打包版本號？與git如何配合使用
• 九、版本號的週期、階段，（-alpha、-beta、-rc都是什麼週期的哪一個階段項目，哪些是開發人員打包的項目，哪些是測試人員的項目，上線的項目）
• 十、一些其餘的npm命令
• 十一、瞭解package.json與項目直接的關係
• 十二、require引入模塊的時候是怎麼查找模塊的

在講解package.json時，必需要先簡單介紹一下npm，那npm是什麼呢？要怎麼安裝呢？

npm

npm 是前端開發普遍使用的包管理工具， 爲您和您的團隊打開了整個JavaScript的世界。 來自各大洲的開源開發人員使用npm來共享和借用包，許多組織也使用npm來管理私有開發。

一、npm是什麼？

官方介紹：

npm makes it easy for JavaScript developers to share and reuse code, and it makes it easy to update the code that you’re sharing.

ps： 官方網站 www.npmjs.com/ 瀏覽、搜索、下載安裝想要的別人上傳的模塊，也能夠直接在命令行中 search 一下。

咱們程序開發中經常須要依賴別人提供的框架，咱們能夠看到一些大型的vue、react框架中也是有依賴別人的模塊或者說是包，這樣能夠提升效率，避免重複造輪子，且每每這些輪子用戶體驗也必比較好。一個包或者說模塊都會有一個package.json文件用來描述這個包。

使用npm，咱們能夠更方便查看依賴這些模塊的更新。

npm都幹什麼了呢？

npm由三個不一樣的組件組成：

• 網站： www.npmjs.com/
• 命令行界面（CLI）：開發者使用它來管理、安裝、更新、發佈模塊；
• 註冊表：保存着人們分享的js模塊的大數據庫

二、安裝npm

從node.js站點安裝npm

第一步：安裝node.js和npm

在這裏不具體講解安裝過程了，網上有不少。 npm 是依附於 node.js 的，咱們能夠去它的官網 nodejs.org/en/download… 下載安裝 node.js。

第二步：測試您的安裝

安裝後，運行node -v。沒有報錯，出現版本號爲成功。安裝node.js是，會自動安裝npm。一樣運行npm -v，可查看版本號。

第三步：若是你須要更新npm

npm 更新地可比 node 勤快多了，所以你下載的 node 附帶的 npm 版本可能不是最新的，你可使用以下命令下載最新 npm:

npm install npm@latest -g
複製代碼

在這講解一下這句話的意思

• install：就表示是要安裝；
• npm@latest： 使用 @ 的格式，表示做用域，指定版本，latest表示最新模板；咱們在下載其餘模塊時也是這個格式。
• -g：表示全局安裝

安裝 -g 是全局安裝，能夠在任意命令下使用,如：

npm i http-server -g
複製代碼

> 咱們在命令行中http-server能夠在命令中使用,是由於咱們配置了環境變量.

/usr/local/bin/http-server -> /usr/local/lb/node_modules/http-server/bin/http-server

package.json

管理本地安裝的npm包的最佳方法是建立一個 package.json文件。

瞭解package.json

每一個項目（npm上下載的包，或者其餘的nodejs項目）的根目錄下面，通常都有一個package.json文件， 定義了這個項目所須要的各類模塊，以及項目的配置信息（好比名稱、版本、許可證、如何啓動項目、運行腳步等元數據）。npm install命令根據這個配置文件，自動下載所需的模塊。

package.json文件就是一個JSON對象，該對象的每個成員就是當前項目的一項設置。好比name就是項目名稱，version是版本（遵照「大版本.次要版本.小版本」的格式）。還會在項目的生命週期中扮演多個角色、開發、測試、上線版本。

package.json的做用

• 做爲一個描述文件，描述了你的項目所依賴的包
• 容許咱們使用 「語義化版本規則」（後面介紹）指明你項目依賴包的版本
• 讓你的構建更好地與其餘開發者分享，便於重複使用

package.json如何建立

一、使用命令行工具客戶端CLI

npm init
複製代碼

這將啓動命令行調查問卷，該調查問卷將package.json在您啓動命令的目錄中建立.

二、建立默認值

要獲取默認值package.json，請npm init使用--yes or -y標誌運行：

npm init -y
複製代碼

此方法將package.json使用從當前目錄中提取的信息生成默認值, 跳過回答問題步驟 。

三、手動建立

直接在項目根目錄新建一個 package.json 文件，而後輸入相關的內容。 具體請查看package.json的注意事項。

package.json文件常見字段詳解

一、 name

必須字段 ，當前模塊\包名稱， 長度必須小於等於214個字符，不能以"."(點)或者"_"(下劃線)開頭，不能包含大寫字母。

這個名字可能會做爲參數被傳入require()，因此它應該比較短，但也要意義清晰。

二、 version

必須字段 ，當前包的版本號，初次創建默認爲1.0.0。

version必須能夠被npm依賴的一個node-semver模塊解析 。定義了當前項目的版本迭代進度。 （遵照「大版本.次要版本.小版本」的格式）

可能如今不少小夥伴們沒有注意或者不在意版本號，更多使用產品的版本號，或者git hashcode方式。

三、 description

可選字段，必須是字符串。當前包的描述信息，是一個字符串。它能夠幫助人們在使用npm search時找到這個包。

若是 package.json 中沒有 description 信息，npm 使用項目中的 README.md 的第一行做爲描述信息。這個描述信息有助於別人搜索你的項目，所以建議好好寫 description 信息。

四、 main

可選字段， 指定了項目加載的入口文件。

這個字段的默認值是模塊根目錄下面的index.js。

五、 scripts

可選字段，scripts是一個由腳本命令組成的hash對象，他們在包不一樣的生命週期中被執行。key是生命週期事件，value是要運行的命令。 指定了運行腳本命令的npm命令行縮寫，好比start指定了運行npm run start時，所要執行的命令。咱們能夠自定義咱們想要的運行腳步命令。

參考： www.ruanyifeng.com/blog/2016/1…

scripts配置執行的腳步

• 1）執行命令 echo xxx

• 2. 執行node_modules/.bin 下的文件

爲何能夠執行呢？

當我執行 npm run的時候，就會自動新建一個 Shell，在這個 Shell 裏面執行指定的腳本命令。所以，只要是 Shell（通常是 Bash）能夠運行的命令，就能夠寫在 npm 腳本里面。會把當前目錄下的node_modules/.bin也拷貝到當前的系統的path（只是臨時拷貝，執行結束後，在將PATH變量恢復原樣）， 因此當前目錄的node_modules/.bin子目錄裏面的全部腳本，均可以直接用腳本名調用，而沒必要加上路徑。

例如：

咱們用node執行一個node.js服務是，node + 文件 能夠用node server.js; 咱們也能夠用webpack的打包前端文件，webpack-dev-server,固然webpack 和webpack-dev-server是要安裝依賴的模塊；

"scripts": {   
    "build": "webpack --mode=development",
    "dev": "webpack-dev-server --mode=development --contentBase=./dist",
    "server":"node app.js"
  }
複製代碼

咱們在命令行工具中輸入npm run server ，就會調用node app.js幫咱們運行。

簡寫形式：

npm start是npm run start
npm stop是npm run stop的簡寫
npm test是npm run test的簡寫
npm restart是npm run stop && npm run restart && npm run start的簡寫
複製代碼

經常使用腳本 -----網上收集轉

// 刪除目錄
"clean": "rimraf dist/*",

// 本地搭建一個 HTTP 服務
"serve": "http-server -p 9090 dist/",

// 打開瀏覽器
"open:dev": "opener http://localhost:9090",

// 實時刷新
 "livereload": "live-reload --port 9091 dist/",

// 構建 HTML 文件
"build:html": "jade index.jade > dist/index.html",

// 只要 CSS 文件有變更，就從新執行構建
"watch:css": "watch 'npm run build:css' assets/styles/",

// 只要 HTML 文件有變更，就從新執行構建
"watch:html": "watch 'npm run build:html' assets/html",

// 部署到 Amazon S3
"deploy:prod": "s3-cli sync ./dist/ s3://example-com/prod-site/",

// 構建 favicon
"build:favicon": "node scripts/favicon.js",

"start": "cross-env NODE_ENV=production node server/index.js",

複製代碼

六、 dependencies、devDependencies

可選字段， dependencies字段指定了項目運行所依賴的模塊 ， devDependencies指定項目開發所須要的模塊 。

值指向一個對象。該對象的各個成員，分別由模塊名和對應的版本要求組成，表示依賴的模塊及其版本範圍。

默認建立的package.json沒有，當咱們安裝npm install一個模塊時就會生成。

npm install express
npm install express --save
npm install express --save-dev
複製代碼

上面代碼表示單獨安裝express模塊，

• 後邊沒有參數時，表示安裝到dependencies屬性，
• --save參數表示將該模塊寫入dependencies屬性，
• --save-dev表示將該模塊寫入devDependencies屬性。

七、bundledDependencies

可選字段，發佈包時同時打包的其餘依賴。

八、 peerDependencies

可選字段，兼容性依賴，若是你的項目或者模塊，同時依賴另外一個模塊，可是所依賴的版本不同。

好比，你的項目依賴A模塊和B模塊的1.0版，而A模塊自己又依賴B模塊的2.0版。

{
  "name": "chai-as-promised",
  "peerDependencies": {
    "chai": "1.x"
  }
}
複製代碼

上面代碼指定，安裝chai-as-promised模塊時，主程序chai必須一塊兒安裝，並且chai的版本必須是1.x。若是你的項目指定的依賴是chai的2.0版本，就會報錯。

九、 bin

可選字段，bin字段用來指定各個內部命令對應的可執行文件的位置。

例如： 以前我在寫建立一個本身的腳手架時，也用到了這個。 juejin.im/post/5e1802…

具體使用可查看，這篇文章的第三步，工程建立。

在項目根目錄建立/bin/www文件

#! /usr/bin/env node
複製代碼

package.json中配置

"bin":{
  "lee-cli":"./bin/www"
}
複製代碼

npm link 將package中的屬性bin的值路徑添加全局連接 建立快捷方式鏈接

在命令行中執行lee-cli就會執行bin/www文件。過程是：

在上面的例子中，www會創建符號連接node_modules/.bin/www。因爲node_modules/.bin/目錄會在運行時加入系統的PATH變量，所以在運行npm時，就能夠不帶路徑，直接經過命令來調用這些腳本。

十、 config

config字段用於向環境變量輸出值

{
  "name" : "package",
  "config" : { "port" : "8080" },
  "scripts" : { "start" : "node server.js" }
}
複製代碼

若是想改變咱們可使用

npm config set package:port 80
複製代碼

十一、engines

可選字段，指明瞭該模塊運行的平臺版本，好比 Node 的某個版本或者瀏覽器， 也能夠指定適用的npm版本 。

"engines" : { 
"node" : 
">=0.10.3 <0.12"
} 
複製代碼

十二、license

可選字段， 表示定義適用於package.json所描述代碼的許可證。不一樣的協議有不一樣的限制。讓用戶知道他們有何權限來使用你的模塊，以及使用該模塊有哪些限制。

可參考： choosealicense.com/ 選擇許可證。

如：MIT：最大許可，別人下載你的代碼能夠改你的代碼,默認安裝值。

1三、author

可選字段，項目開發者。

1四、private

可選字段，布爾值，是否私有，設置爲 true 時，npm 拒絕發佈。

這是防止私有包被之外發布的一種方法。若是你但願包裝某個包只能被髮布到特定的一個registry中(好比，一個內部的registry)，則可使用下面的publishConfig字典來描述以在publish-time重寫registry配置參數。

1五、keywords

可選字段，項目關鍵字，是一個字符串數組。它能夠幫助人們在使用npm search時找到這個包。

1六、os

可選字段，指定模塊能夠在什麼操做系統上運行

1七、style

style指定供瀏覽器使用時，樣式文件所在的位置。

1八、repository

包代碼存放的地方的類型，能夠是 git 或 svn，git 可在 Github 上

1九、homepage

可選字段，沒有http://等帶協議前綴的URL。

版本問題：

version:"1.0.0"

1.0.0:

第一位改變表示：不兼容老代碼,大規模的更新，新版本發佈；

第二位表示：增長了一些功能，向下兼容；

第三位表示：小的補丁，bug修改；

咱們發表項目的時候，一盤使用npm + git

• 使用npm version patch (patch打補丁) 這種會改變版本的第三位；使用git tag 執行即會自動在git上版本號
• 使用npm version minor這種改變的版本號的第二位；同步git版本；
• 使用npm version major 這種改變版本號的第一位；同步git版本；

npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]

major：主版本號

minor：次版本號

patch：補丁號

premajor：預備主版本

prepatch：預備次版本

prerelease：預發佈版本
複製代碼

ps：注意，若是報錯：Git working directory not clean 是說明你如今須要git status是clean的。

git add .
git commit -m"package.json詳解 "
複製代碼

npm versin monir -m"增長版本號"

git push -u origin master
複製代碼

如何制定規則？

做爲使用者，咱們能夠在 package.json 文件中寫明咱們能夠接受這個包的更新程度（假設當前依賴的是 1.2.4 版本）：

• 若是隻打算接受補丁版本的更新（也就是最後一位的改變），就能夠這麼寫：

  1.2
   1.2.x
   ~1.2.4
  複製代碼

• 若是接受小版本的更新（第二位的改變），就能夠這麼寫：

  1
  1.x
  ^1.2.4
  複製代碼

• 若是能夠接受大版本的更新（天然接受小版本和補丁版本的改變），就能夠這麼寫：

  *
  x
  複製代碼

  小結一下：總共三種版本變化類型，接受依賴包哪一種類型的更新，就把版本號準確寫到前一位。

版本週期、階段：

• α -Alpha 第一階段 通常只供內測使用
• β -Beta 第二階段 已經消除了軟件中大部分的不完善之處，可是仍有可能還存在缺陷和漏洞，通常提供給特定的用戶羣裏來測試使用；
• γ - RC 是第三階段，此時產品已經至關成熟，只須要在個別地方在作進一步的優化處理便可上市發佈

例如：

2.1.0-beta.1 通常這樣用戶不會安裝這種的，這種能夠用內側、測試人員使用。

依賴包的版本問題

實例	說明
~1.2.3	主版本+次要版本+補丁版本;1.2.3 <= version < 1.3.0;
~1.2	主版本+次要版本;1.2.0 <= version < 1.3.0
~1	主版本;1.0.0 <= version < 2.0.0

符號	實例	版本範圍	說明
	1.0.0	1.0.0	鎖定1.0.0版本，必須這個版本。
^會匹配最新的大版本依賴包	^1.2.三、^0.2.3	>=1.2.3 <2.0.0、>=0.2.3 <0.3.0	表示安裝1.x.x的最新版本（不低於1.2.3，包括1.3.0），可是不安裝2.x.x，也就是說安裝時不改變大版本號。須要注意的是，若是大版本號爲0，則插入號的行爲與波浪號相同，這是由於此時處於開發階段，即便是次要版本號變更，也可能帶來程序的不兼容。(主版本)
~會匹配最近的小版本依賴包	~1.2.3	>=1.2.3 <1.3.0	表示安裝1.2.x的最新版本（不低於1.2.3），可是不安裝1.3.x，也就是說安裝時不改變大版本號和次要版本號。
>=	>=2.1.0	>=2.1.0	大於等於2.1.0
<=	<=2.0.0	<=2.0.0	小於等於2.0.0
laster			安裝最新的版本
*		>=0.0.0	任何版本
-	1.2.3 - 2.3.4	>=1.2.3 <=2.3.4

區分安裝Dependencies和dependencies？

devDependencies是開發所須要的模塊，因此咱們能夠在開發過程當中須要的安裝上去，來提升咱們的開發效率，好比一些知名的第三方庫， webpack、rollUp、less、babel這些。 就不必在生成環境安裝。

如下類庫都建議安裝到devDependencies:

• 單元測試支撐（mocha、chai）；
• 語法兼容（babel）；
• 語法轉換（jsx to js、coffeescript to js、typescript to js）
• 程序構建與優化（webpack、gulp、grunt、uglifyJS）；
• css 處理器（postCSS、SCSS、Stylus）；
• 代碼規範（eslint）；

依賴包（指定、更新、本地、使用、卸載）

一、安裝本地依賴包

npm install jquery
複製代碼

這個命令會在當前目錄建立一個 node_modules 目錄，而後下載咱們指定的包到這個目錄中。

二、指定安裝版本，能夠在package name後@版本號。

若是包的名稱以包開頭@，則它是一個範圍包。

npm install jquery@3.4.1
npm install jquery@">=1.1.0 <2.2.0"
npm install jquery@latest
複製代碼

更新以後，dependencies內的版本號也會改變。

三、更新依賴包

npm update jquery
複製代碼

四、使用包

let jquery = require('jquery');
複製代碼

<script src="/node_modules/jquery/dist/jquery.js">//這個須要注意路徑</script> 
複製代碼

六、卸載依賴包

npm uninstall jquery
複製代碼

Semantic versioning（語義化版本規則）

docs.npmjs.com/about-seman…

github.com/npm/node-se…

package.json注意事項

根據上邊咱們在使用npm init會詢問咱們填幾項內容，有的能夠不填，有的必須填，這些必填都是一個package.json內容必需要具有的字段：name和version,若是沒有，沒法執行install

• name:全是小寫，沒有空格,循序使用連字符和下劃線
• version: 版本號,遵循上邊說的語義化版本規則x.x.x

其餘注意事項：

• 添加中文註釋會編譯出錯

延伸

其餘

一、咱們常常會在安裝一半退出在繼續安裝會報錯，這是由於有緩存的緣由。

npm cache clean --force
複製代碼

二、npx

npx能夠直接執行node_modules/.bin文件 不須要在去配置scripts

若是模塊不存在能夠安裝，安裝完有後會本身銷燬，避免安裝全局模塊

參考資料：

cloud.tencent.com/developer/s…

docs.npmjs.com/about-seman…

semver.org/lang/zh-CN/

docs.npmjs.com/misc/semver…

www.ruanyifeng.com/blog/2016/1…