看前端項目，第一眼看什么？

不知道大家看前端項目第一眼看什么？我先說我的答案，我會先看 package.json.剛好最近有一個剛學前端的小伙伴問我：package.json 干了什么？如果要回答這個問題，那肯定就需要先了解什么是包 / 庫，下文統稱為包，

什么是包 ？

在前端開發中，包（Package）是指一個包含了代碼、資源和配置文件的集合，通常用于實現特定的功能或解決某個問題。包可以是一個庫、框架、工具或者任何可以被復用的代碼模塊。包的核心目的是為了代碼的復用和共享，使得開發者可以避免重復造輪子，提高開發效率。 這里我們直接看一個包，就看dayjs這個包： https://www.npmjs.com/package/dayjs 吧！這是一個時間處理的包，它把關于時間處理的方法都寫好了，我們只需要安裝這個包，安裝好后，假如我們想要輸出一個格式的時間只需要調用 dayjs().format('{YYYY} MM-DDTHH:mm:ss SSS [Z] A') 就好，我們就能得到想要的數據格式。 這里包就像現實生活中的工具箱的工具一樣，我們從工具箱拿出卷尺（對應前端項目中的一個包），只要知道它怎么使用，我們就就可以來使用它測試長度，我們不需要去關心這個卷尺是如何制造的。 知道了包是什么，我們再看看 dayjs 庫我們會發現這個庫有超多個版本也很好理解，我們自己寫一個東西，也不是一下子就寫好了，我們肯定是一點一點開發，我們開發完成一部分功能，我們上線一個版本，然后上線，再開發一部分功能，然后上線。我們每次上線一個版本都會更新我們的版本號，方便我們管理這個包 。我們知道了庫有版本的概念，那我們在開發一個大項目中，我們引入一個庫，也需要有一個地方來聲明我們引入哪個版本的。所以就有了包管理工具。這就是管理依賴產生的原因：它是用來管理庫的版本的。前端項目都使用 package.json 來管理依賴的版本，當然它還做了很多其他的事情，例如：定義腳本，項目元數據，聲明配置文件，配置包管理行為等等

真實 package.json 的依賴

這里我們看一個真實的項目的 package.json我們可以看到它使用了很多庫，這些庫后面都有自己的版本號，寫的很清楚，這樣我們使用 npm 或者其他包管理工具，下載這些包的時候，我們就能夠下載到指定版本號的的依賴了。

什么是包管理工具？

包管理工具是用于管理軟件項目中依賴包的工具。它們可以幫助開發者自動化地下載、安裝、更新和刪除項目所需的各種庫和工具包。包管理工具在現代軟件開發中扮演著非常重要的角色，特別是在前端開發中。常見的包管理工具：npm ，yarn，cnpm ，pnpm（推薦使用）

其實你現在就可以去嘗試，寫一個包，最好我們的包也依賴了一些包，然后發布到 npm上，這樣你對包 和包管理工具理解就更加深刻了！都說到這里了，那現在就快速實現一下吧！

寫一個包，并發布

這里我已經寫好了一個很簡單的包：https://github.com/chaseFunny/file-size-check，它的作用是監測文件夾下的文件是否有超出限制大小的，看一下它的 package.json 文件：

{
  "name": "file-size-check",
  "private": false,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "bin": {
    "file-size-check": "./src/main.ts"
  },
  "devDependencies": {
    "@types/node": "^20.12.7",
    "@types/rollup": "^0.54.0",
    "rollup-plugin-obfuscator": "^1.1.0",
    "rollup-plugin-terser": "^7.0.2",
    "typescript": "^5.2.2",
    "vite": "^5.2.0"
  }
}

我們可以看到它有一些我們上面提到的功能

1. 管理依賴：我們使用 devDependencies 來列出項目在開發環境中需要的依賴包，這些包不會被打包到生產環境
2. 定義腳本：定義項目中常用的腳本命令。例如，可以定義 dev 腳本來啟動開發服務器，build 腳本來構建項目，preview 腳本來預覽 build 的效果
3. 項目元數據：
1. 項目名稱： name
2. 是否是私密項目：private
3. 項目版本：version
4. 指定項目的模塊類型：type
4. 定義可執行命令的路徑：使用 bin 創建一個名為 file-size-check 的全局命令，該命令會執行 ./src/main.ts 文件

我們寫好 package.json 和我們的核心代碼，測試完成沒問題后，就可以發布到 npm 了，如何發布請參考： https://kimi.moonshot.cn/share/cpisd4tvbf6mstoqrrp0好了，到這里我們就完成了一個包的開發，如果我們想要改進我們的功能，我們就可以再次開發，然后修改版本號，進行發布，如果你不更新版本號是發布不通過的。這里我們就更加深刻理解 package.json 的作用了！