[[425672]]

本文轉(zhuǎn)載自微信公眾號「精益碼農(nóng)」，作者有態(tài)度的馬甲。轉(zhuǎn)載本文請聯(lián)系精益碼農(nóng)公眾號。

最近在公司某項(xiàng)目參與了一些前端工作，作為后端摳腳大漢，改點(diǎn)前端細(xì)節(jié)磕磕絆絆，改點(diǎn)大前端、工程化、HTTP交互倒也還能做到柳暗花明。

于是打算用后端程序猿的視角記錄一些{大前端}的知識快閃，也算是幫助讀者構(gòu)建完整的全棧技能體系。

快閃一：paakage.json文件知多少

如果你使用了nodejs、npm項(xiàng)目、Angular項(xiàng)目等，你都會用到package.json文件，package.json文件是項(xiàng)目的清單文件，package.json在react項(xiàng)目開發(fā)和部署階段扮演了重要角色。

Package.json = 項(xiàng)目元信息+ 依賴的組件版本+ 腳本

請看下面的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項(xiàng)目的名稱

需要滿足以下約定：

① name 應(yīng)使用小寫

② name應(yīng)該少于214字符

③ 可以使用- 或者_(dá)

Version: 當(dāng)前項(xiàng)目的版本，需要滿足以下約定

x.x.x - major.minor.patches

Private: 這是一個(gè)重要的屬性，主要用于防止私有代碼庫的意外發(fā)布。如果為true，則不會發(fā)布到公開的npm生態(tài)系統(tǒng)。

Dependencies：包含一系列的node module + 生產(chǎn)環(huán)境依賴的版本，上面的例子中，我們需要以下版本的依賴：

"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將會執(zhí)行 react-scripts start

Browserlist: 這個(gè)屬性用于在不同的前端工具之間共享目標(biāo)瀏覽器和node.js版本。

eslintconfig:該屬性包括Create React App使用的可共享ESLint配置。

devDependeties: 這個(gè)屬性不在上面的示例代碼中，但它非常重要，因此還是要啰嗦它：這個(gè)屬性列出了開發(fā)和測試所需的包。

以上是package.json文件中最重要的幾個(gè)屬性，下面啰嗦一下版本語法：x.x.x： major.minor.patches

版本語法中有些特殊符號：

1. ~: Update patch release only. Eg. If you set ^17.0.2 then 17.0.3 will be ok but 18.0.2 will not work.

2. ^: Can update patch + minor. Not major version

3. *: Can update all three major + minor + patches versions

4. >: Higher version than specify a version.

5. >=: Equal and Higher than specify a version

6. <: Less than specifying a version

7. <=: Less or equal to specify a version

這就是快閃一：package.json知多少 的全部，現(xiàn)在是不是對于package.json文件的作用有了更深刻的認(rèn)識了圖片。