前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
API 文檔、設(shè)計(jì)、調(diào)試、自動(dòng)化測(cè)試一體化協(xié)作工具：點(diǎn)擊使用

日常開發(fā)中我們都知道package.json是對(duì)項(xiàng)目或者模塊包的描述,里面包含許多元信息,那么應(yīng)該如何讀取package.json獲取里面的信息呢？發(fā)揮作用的就是咱們今天的主角——read-pkg，關(guān)鍵源碼只有30行左右，接下來(lái)就一起細(xì)看一下實(shí)現(xiàn)，也算是為后續(xù)開發(fā)自己的工具包奠定基礎(chǔ)！【相關(guān)教程推薦：nodejs視頻教程】

收獲清單

• 調(diào)試源碼
• 優(yōu)雅的獲取package.json
• 規(guī)范包元數(shù)據(jù)
• import.meta.url的應(yīng)用

學(xué)前準(zhǔn)備

下載源碼

git clone https://github.com/sindresorhus/read-pkg.git cd read-pkg&&yarn

一般源碼學(xué)習(xí)先看README.md和package.json，readme教用法，package.json則會(huì)注明命令，一般我們調(diào)試也是從package.json的script入手，甩個(gè)截圖：

這命令第一次見可能不知道它想表達(dá)啥，再往下看devDependencies就可以知道三個(gè)命令分別對(duì)應(yīng)三個(gè)包，不知道包干嘛的？自行百度去，一般包的用法都能在npm上搜到

• ava

node.js測(cè)試包

• tsd

檢測(cè)ts類型

• xo

(ESLint包裝器)，具有很好的默認(rèn)值

源碼調(diào)試分析

提前在入口文件打好斷點(diǎn)，然后點(diǎn)package.json的script中的調(diào)試腳本按鈕開啟調(diào)試，如果沒有這個(gè)按鈕，則可能需要更新vscode。

源碼結(jié)構(gòu)分析

• 引入依賴

// node進(jìn)程 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，并且會(huì)伴隨有用的報(bào)錯(cuò)，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)試來(lái)到了test文件，有幾個(gè)概念在很多源碼中都會(huì)看到，因此值得我們關(guān)注一下，下面分別解析：

import.meta.url

主要是應(yīng)用于__filename和__dirname在ES模塊不可用

path.dirname

用于獲取指定路徑的目錄名稱

fileURLToPath(import.meta.url)

提取路徑

process.chdir

更改Node.js進(jìn)程的當(dāng)前工作目錄，或者在執(zhí)行失敗時(shí)拋出異常(例如，如果指定的目錄不存在)。

• readPackage方法(異步讀取)

export async function readPackage({cwd, normalize = true} = {}) { // 默認(rèn)用process.cwd獲取當(dāng)前工作目錄，獲取工作目錄     cwd = toPath(cwd) || process.cwd(); // 獲取package.json相對(duì)當(dāng)前工作目錄的絕對(duì)路徑     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} = {}) {    // 默認(rèn)用process.cwd獲取當(dāng)前工作目錄，獲取工作目錄     cwd = toPath(cwd) || process.cwd();    // 獲取package.json相對(duì)當(dāng)前工作目錄的絕對(duì)路徑     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)序列化后會(huì)生成_id,對(duì)應(yīng)測(cè)試用例中的t.truthy(package_._id)

總結(jié)

今天下載并調(diào)試了read-pkg的源碼，進(jìn)一步了解了nodejs的path、url、process模塊對(duì)于讀取文件的應(yīng)用，read-pkg麻雀雖小五臟俱全，完整的測(cè)試用例也是我們可以在自己的工具包中借鑒使用的！今天剛好是國(guó)慶，追夢(mèng)人們國(guó)慶快樂哇~