最近在公司某專案參與了一些前端工作，作為後端摳腳大漢，改點前端細節磕磕絆絆，改點大前端、工程化、HTTP互動倒也還能做到柳暗花明。
於是打算用後端程式猿的視角記錄一些{大前端}的知識快閃，也算是幫助讀者構建完整的全棧技能體系。
快閃一： paakage.json檔案知多少
如果你使用了nodejs、npm專案、Angular專案等，你都會用到package.json檔案，package.json檔案是專案的清單檔案，package.json在react專案開發和部署階段扮演了重要角色。
Package.json = 專案元資訊+ 依賴的元件版本+ 指令碼
請看下面的package.json示例檔案：
{
"name": "first-react-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"
]
}
}
庖丁解牛，深入分析。
Name： react專案的名稱
需要滿足以下約定：
① name 應使用小寫
② name應該少於214字元
③ 可以使用- 或者_
Version: 當前專案的版本，需要滿足以下約定
x.x.x - major.minor.patches
Private: 這是一個重要的屬性，主要用於防止私有程式碼庫的意外發布。如果為true，則不會發布到公開的npm生態系統。
Dependencies：包含一系列的node module + 生產環境依賴的版本，上面的例子中，我們需要以下版本的依賴：
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
react版本：^17.0.2，意味著npm將安裝與“17.x.x”匹配的最新版本。
Scripts: 包含常見的[react命令指令碼]的別名。
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
npm start將會執行 react-scripts start
Browserlist: 這個屬性用於在不同的前端工具之間共享目標瀏覽器和node.js版本。
eslintconfig:該屬性包括Create React App使用的可共享ESLint配置。
devDependeties: 這個屬性不在上面的示例程式碼中，但它非常重要，因此想要囉嗦它：這個屬性列出了開發和測試所需的包。
以上是package.json檔案中最重要的幾個屬性，下面囉嗦一下版本語法：x.x.x。
版本語法中有些特殊符號：
- ~ : Update patch release only. Eg. If you have 17.0.2 then 17.0.3 will be ok but 18.0.2 will not work.
- ^ : Can update Patch + minor. Not major version
- * : Can update all three Major + Minor + Patches versions
- >: Higher version than specify a version.
- >= : Equal and Higher than specify a version
- < : Less than specifying a version
- <=: Less or equal to specify a version
這就是快閃一：package.json知多少 的全部，現在是不是對於package.json檔案的作用有了更深刻的認識了。