站長資訊網(wǎng)
前端（vue）入門到精通課程：進入學習
API 文檔、設(shè)計、調(diào)試、自動化測試一體化協(xié)作工具：點擊使用
日常開發(fā)中我們都知道package.json是對項目或者模塊包的描述,里面包含許多元信息,那么應(yīng)該如何讀取package.json獲取里面的信息呢？發(fā)揮作用的就是咱們今天的主角——read-pkg，關(guān)鍵源碼只有30行左右，接下來就一起細看一下實現(xiàn)，也算是為后續(xù)開發(fā)自己的工具包奠定基礎(chǔ)！【相關(guān)教程推薦：nodejs視頻教程】
收獲清單
- 調(diào)試源碼
- 優(yōu)雅的獲取package.json
- 規(guī)范包元數(shù)據(jù)
- import.meta.url的應(yīng)用
學前準備
下載源碼
git clone https://github.com/sindresorhus/read-pkg.git cd read-pkg&&yarn
一般源碼學習先看README.md和package.json，readme教用法，package.json則會注明命令，一般我們調(diào)試也是從package.json的script入手，甩個截圖：
這命令第一次見可能不知道它想表達啥，再往下看devDependencies就可以知道三個命令分別對應(yīng)三個包，不知道包干嘛的？自行百度去，一般包的用法都能在npm上搜到
- ava
node.js測試包
- tsd
檢測ts類型
- xo
(ESLint包裝器)，具有很好的默認值
源碼調(diào)試分析
提前在入口文件打好斷點，然后點package.json的script中的調(diào)試腳本按鈕開啟調(diào)試，如果沒有這個按鈕，則可能需要更新vscode。
源碼結(jié)構(gòu)分析
- 引入依賴
// node進程 import process from 'node:process'; // fs文件模塊 import fs, {promises as fsPromises} from 'node:fs'; // path 路徑模塊 import path from 'node:path'; // url模塊 import {fileURLToPath} from 'node:url'; // 解析json，并且會伴隨有用的報錯，https://github.com/sindresorhus/parse-json#readme import parseJson from 'parse-json'; // 規(guī)范化包元數(shù)據(jù) https://github.com/npm/normalize-package-data#readme import normalizePackageData from 'normalize-package-data';
- 將url轉(zhuǎn)化為文件路徑
// fileURLToPath將url轉(zhuǎn)化為文件路徑 const toPath = urlOrPath => urlOrPath instanceof URL ? fileURLToPath(urlOrPath) : urlOrPath;
隨著調(diào)試來到了test文件，有幾個概念在很多源碼中都會看到，因此值得我們關(guān)注一下，下面分別解析：
import.meta.url
主要是應(yīng)用于__filename和__dirname在ES模塊不可用
path.dirname
用于獲取指定路徑的目錄名稱
fileURLToPath(import.meta.url)
提取路徑
process.chdir
更改Node.js進程的當前工作目錄，或者在執(zhí)行失敗時拋出異常(例如，如果指定的目錄不存在)。
- readPackage方法(異步讀取)
export async function readPackage({cwd, normalize = true} = {}) { // 默認用process.cwd獲取當前工作目錄，獲取工作目錄 cwd = toPath(cwd) || process.cwd(); // 獲取package.json相對當前工作目錄的絕對路徑 const filePath = path.resolve(cwd, 'package.json'); // 異步讀取package.json并解析，fsPromises異步文件模塊 const json = parseJson(await fsPromises.readFile(filePath, 'utf8')); // 規(guī)范化包元數(shù)據(jù) if (normalize) { normalizePackageData(json); } return json; }
- readPackageSync方法（同步讀?。?/li>
export function readPackageSync({cwd, normalize = true} = {}) { // 默認用process.cwd獲取當前工作目錄，獲取工作目錄 cwd = toPath(cwd) || process.cwd(); // 獲取package.json相對當前工作目錄的絕對路徑 const filePath = path.resolve(cwd, 'package.json'); // 讀取package.json并解析 const json = parseJson(fs.readFileSync(filePath, 'utf8')); // 序列化元數(shù)據(jù) if (normalize) { normalizePackageData(json); } return json; }
- normalizePackageData作用
序列化前
序列化后
調(diào)試后發(fā)現(xiàn)序列化后會生成_id,對應(yīng)測試用例中的t.truthy(package_._id)
總結(jié)
今天下載并調(diào)試了read-pkg的源碼，進一步了解了nodejs的path、url、process模塊對于讀取文件的應(yīng)用，read-pkg麻雀雖小五臟俱全，完整的測試用例也是我們可以在自己的工具包中借鑒使用的！今天剛好是國慶，追夢人們國慶快樂哇~
