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

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

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

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

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

請(qǐ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)使用小寫(xiě)
② name應(yīng)該少于214字符
③ 可以使用- 或者_(dá)

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

Private: 這是一個(gè)重要的屬性，主要用于防止私有代碼庫(kù)的意外發(fā)布。如果為true，則不會(huì)發(fā)布到公開(kāi)的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: 包含常見(jiàn)的[react命令腳本]的別名。

"scripts":?{"start":?"react-scripts?start","build":?"react-scripts?build","test":?"react-scripts?test","eject":?"react-scripts?eject"}

npm start將會(huì)執(zhí)行?react-scripts start

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

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

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

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

版本語(yǔ)法中有些特殊符號(hào)：

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 version3.?*:? Can update?all three?major + minor + patches versions4.??>: Higher version than specify a version.5.?>=: Equal and Higher than specify a version6.?<: Less than specifying a version7.?<=: Less or equal to specify a version

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

?性感豹紋

?鵝廠二面，Nginx回憶錄

?前后端分離，如何在前端項(xiàng)目中動(dòng)態(tài)插入后端API基地址？（in docker）

?前端鏡像打包這么慢，你該反省一下

?誰(shuí)說(shuō)docker-compose不能水平擴(kuò)展容器、服務(wù)多實(shí)例？

?面試官：單點(diǎn)登錄你搞過(guò)嗎？

?難纏的布隆過(guò)濾器，這次終于通透了

本文內(nèi)容和制圖均為原創(chuàng)，文章永久更新地址請(qǐng)參閱左下角原文，老鳥(niǎo)輕噴，菜鳥(niǎo)互啄。

總結(jié)

以上是生活随笔為你收集整理的大前端快闪：package.json文件知多少？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。