从 vue-cli 源码中，我发现了27行读取 json 文件有趣的 npm 包

1. 前言

大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。已进行四个月了，很多小伙伴表示收获颇丰。

想学源码，极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。

本文仓库 https://github.com/lxchuan12/read-pkg-analysis.git，求个star^_^^[1]

源码共读活动 每周一期，已进行到15期。源码群里有小伙伴提问，如何用 import 加载 json 文件。同时我之前看到了vue-cli 源码 里有 read-pkg 这个包。源码仅27行，非常值得我们学习。

阅读本文，你将学到：

1. 如何学习调试源码
2. 学会如何获取 package.json
3. 学到 import.meta 
4. 学到引入 json 文件的提案
5. JSON.parse 更友好的错误提示
6. 规范化 package 元数据
7. 等等

2. 场景

优雅的获取 package.json 文件。

read-pkg^[3]

vue-cli 源码^[4]

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 {}
}

封装这个函数的commit 记录^[5]

你也许会想直接 require('package.json'); 不就可以了。但在ES模块下，目前无法直接引入JSON文件。

在 stackoverflow 也有相关提问^[6]

我们接着来看 阮一峰老师的 JSON 模块^[7]

import 命令目前只能用于加载 ES 模块，现在有一个提案^[8]，允许加载 JSON 模块。import 命令能够直接加载 JSON 模块以后，就可以像下面这样写。

import configData from './config.json' assert { type: "json" };
console.log(configData.appName);

import 命令导入 JSON 模块时，命令结尾的 assert {type: "json"} 不可缺 少。这叫做导入断言，用来告诉 JavaScript 引擎，现在加载的是 JSON 模块。

接下来我们学习 read-pkg 源码^[9]。

3. 环境准备

3.1 克隆

# 推荐克隆我的项目，保证与文章同步
git clone https: