更优雅的获取package.json信息，浅析vue-cli是如何读取pkg文件

前言

获取Package.json文件内容的操作并不少见，如版本号获取、入口文件声明等， 这篇文章将浅析pkg文件获取的思路和实现

场景

vue-cli

const fs = require('fs')
const path = require('path')
const readPkg = require('read-pkg')

exports.resolvePkg = function (context) {
  if (fs.existsSync(path.join(context, 'package.json'))) {
    return readPkg.sync({ cwd: context })
  }
  return {}
}

Vue Cli中借助了 read-pkg 实现了pkg文件的读取，resolvePkg函数也很简单，读取上下文中的package.json 是否存在然后读取返回

如果不使用require的导入方式，Node中 import是不支持直接对json文件进行导入

另外在Node高版本中，已经可以直接通过import,但还需要另外加特殊声明，本地使用的是Node18版本

import pkg from './package.json' assert { type: "json" };

console.log(pkg)

接下来将去探究 read-pkg中是如何实现Json文件的读取返回

环境

# git clone https://github.com/sindresorhus/read-pkg.git
# cd read-pkg && npm i
# npm run test

在源码中package.json也可以知道入口文件为./index.js

"exports": "./index.js",

快速上手

npm i read-pkg

import {readPackage,readPackageSync} from 'read-pkg'

console.log(await readPackage()) // 异步调用
console.log(readPackageSync()) //同步调用

主入口

import fs from 'node:fs';
import fsPromises from 'node:fs/promises';
import path from 'node:path';
import {fileURLToPath} from 'node:url';
import parseJson from 'parse-json';
import normalizePackageData from 'normalize-package-data';

const toPath = urlOrPath => urlOrPath instanceof URL ? fileURLToPath(urlOrPath) : urlOrPath;
const getPackagePath = cwd => path.resolve(toPath(cwd) ?? '.', 'package.json');
const _readPackage = (file, normalize) => {
//...
};
export async function readPackage({cwd, normalize = true} = {}) {
//...
}
export function readPackageSync({cwd, normalize = true} = {}) {
//...
}
//解析pkg内容
export function parsePackage(packageFile, {normalize = true} = {}) {
//...
}

整体源码50行，核心的就是 readPackage,readPackageSync两个函数

一些用到的包

import fsPromises from 'node:fs/promises'

parseJson

作用和 JSON.parse相似，但提供更好的报错提示

normalize-package-data

规范化Package.json数据的格式，并且会在其中生成一个id的字段，这一点后面会在测试例子提起

工具函数

const toPath = urlOrPath => urlOrPath instanceof URL ? fileURLToPath(urlOrPath) : urlOrPath;

通过instanceof运算符判断其操作符左边的原型是否有在右边对象的原型链上存在，这里的作用就是将字符或者URL转为路径格式

const getPackagePath = cwd => path.resolve(toPath(cwd) ?? '.', 'package.json');

得到package.json路径，path.resolve默认取执行目录路径

const _readPackage = (file, normalize) => {
        //如果是字符串则JSON.parse转为对象，file就是通过API读取回来的字符内容
	const json = typeof file === 'string'
		? parseJson(file)
		: file;
        //默认normalize为true，规范化pkg数据的格式
	if (normalize) {
		normalizePackageData(json); //规范化包的元数据 返回更规范的格式
	}

	return json;
};

返回 package.json对象数据

主函数

export async function readPackage({cwd, normalize = true} = {}) {
	//借助readFile API 读取文件返回文本
	const packageFile = await fsPromises.readFile(getPackagePath(cwd), 'utf8');
	return _readPackage(packageFile, normalize);
}

export function readPackageSync({cwd, normalize = true} = {}) {
	const packageFile = fs.readFileSync(getPackagePath(cwd), 'utf8');
	return _readPackage(packageFile, normalize);
}

这里的核心就是通过 fs.readFile这个API 读取了文件的内容，然后通过_readPackage将内容转为对象格式

只需要得到文件路径，然后通过API读取文件内容，最后通过JSON.parse转为对象就可以实现pkg文件的读取了

解析函数

export function parsePackage(packageFile, {normalize = true} = {}) {
	const isObject = packageFile !== null && typeof packageFile === 'object' && !Array.isArray(packageFile);
	const isString = typeof packageFile === 'string';

	if (!isObject && !isString) {
		throw new TypeError('`packageFile` should be either an `object` or a `string`.');
	}

	// Input should not be modified - if `structuredClone` is available, do a deep clone, shallow otherwise
	// TODO: Remove shallow clone when targeting Node.js 18
	const clonedPackageFile = isObject
		? (globalThis.structuredClone === undefined
			? {...packageFile}
			: structuredClone(packageFile))
		: packageFile;

	return _readPackage(clonedPackageFile, normalize);
}

isObject判断是否为一个对象，isString判断是否为字符串。 structuredClone 是一个全新的用于深拷贝的全局函数，需要注意的是它非常的新，所以使用它还需要考虑下兼容性的问题

还需要注意的是它无法处理函数以及DOM节点的数据 结构化克隆算法

这里clonedPackageFile 先判断structuredClone是否存在，不存在则使用对象解构的写法进行浅拷贝。最后通过_readPackage返回拷贝后的新对象

测试用例

test/test.js

import {fileURLToPath, pathToFileURL} from 'node:url';
import path from 'node:path';
import test from 'ava';
import {readPackage, readPackageSync, parsePackage} from '../index.js';

const dirname = path.dirname(fileURLToPath(test.meta.file));
const rootCwd = path.join(dirname, '..');

test('async', async t => {
	const package_ = await readPackage();
	t.is(package_.name, 'unicorn');
	t.truthy(package_._id);
});


test('sync', t => {
	const package_ = readPackageSync();
	t.is(package_.name, 'unicorn');
	t.truthy(package_._id);
});

test('sync - cwd option', t => {
	const package_ = readPackageSync({cwd: rootCwd});
	t.is(package_.name, 'read-pkg');
	t.deepEqual(
		readPackageSync({cwd: pathToFileURL(rootCwd)}),
		package_,
	);
});

test('sync - normalize option', t => {
	const package_ = readPackageSync({normalize: false});
	t.is(package_.name, 'unicorn ');
});

const pkgJson = {
	name: 'unicorn ',
	version: '1.0.0',
	type: 'module',
};

test('parsePackage - json input', t => {
	const package_ = parsePackage(pkgJson);
	t.is(package_.name, 'unicorn');
	t.deepEqual(
		readPackageSync(),
		package_,
	);
});

t.truthy(package_._id);被 规范化后的包对象数据中会增加一个id字段，所以这里测试用例也对它做了判断

实现

import fs from 'node:fs'
import path from 'node:path'

//默认取项目下的package.json
const pkgPath = (cwd='') => path.resolve(cwd,'package.json')
const getPkgStr = (file) => fs.readFileSync(file,'utf-8')

// 得到pkg路径
const _pkgPath = pkgPath()
// 读取文件 返回字符串
const _pkgStr = getPkgStr(_pkgPath)
// 转对象
const _pkgObj = JSON.parse(_pkgStr)

console.log(_pkgObj)

总结

1. 除了JSON.parse(JSON.stringify())的简单实现深拷贝(有局限性)的方式，在比较新的环境下又增加了structuredClone这个全局API(不支持Function和Dom节点，但基本使用深拷贝时很少涉及这部分)
2. 函数整体只有50行出头，而且核心的是实现就是Node下的fs模块读文件的操作，通过转JSON的操作就可以实现文件的读取.(当然实际比如Vite环境下或者高版本的Node是支持通过声明直接import Json文件的操作)
3. 还提到了promiseify函数，回顾一下它吧，其核心就是通过Reflect.apply的调用，增加了函数的入参(对应的就是函数最后一个参数的回调)，实现Node模块的promise化