JSON5进阶指南：从安装到实战应用-CSDN博客

1. 为什么你需要JSON5：不止于JSON的便利

如果你写过JSON配置文件，肯定遇到过这些头疼事：想加个注释说明某个配置项是干嘛的，结果发现JSON压根不支持注释；不小心在数组最后一个元素后面多打了个逗号，整个解析直接报错；或者写一个很长的键名，每次都要加双引号，感觉手指都要抽筋了。这些看似不大的“小麻烦”，在大型项目或者团队协作时，积累起来就是影响效率和心情的“大问题”。

JSON5就是为了解决这些痛点而生的。你可以把它理解为JSON的“人性化”升级版。它完全兼容标准的JSON，这意味着任何合法的JSON文件，用JSON5解析器都能正确读取。但在此之上，它慷慨地加入了一系列让开发者“写起来更爽”的特性。最让我喜欢的就是注释，无论是用 // 写的单行注释，还是用 /* */ 包裹的多行注释，都可以自由地写在配置文件里，用来解释某个晦涩的配置项为什么这么设置，或者标记某个功能暂时禁用。这对于几个月后回头维护代码，或者新同事接手项目时，简直是救命稻草。

另一个解放生产力的特性是末尾逗号。在数组或者对象的最后一个成员后面，你可以放心地加上逗号，而不用担心解析错误。这有什么好处呢？当你需要调整结构、增删条目时，版本对比工具（如Git Diff）会清晰得多，因为修改通常只涉及单行，而不用同时改动上一行的末尾逗号。键名不加引号也让配置文件清爽了不少，尤其是当键名符合JavaScript标识符规范（比如不含空格、不以数字开头）时，直接写 apiUrl 可比写 "apiUrl" 要顺眼和快捷。

我最初接触JSON5是在一个前端构建配置里，看到webpack.config.js里引入了.json5文件，里面充满了清晰的注释和易读的结构，瞬间就觉得这比硬啃一堆没有说明的JSON键值对友好太多了。从那以后，在需要写任何非机器对机器、而是需要人来阅读和修改的配置文件时，JSON5就成了我的首选。

2. 在不同环境中安装与引入JSON5

安装JSON5非常简单，它本质上就是一个JavaScript库。但根据你使用的环境不同，引入方式也有些许差异，选对方法能让开发更顺畅。

2.1 Node.js / 前端构建项目（使用npm或yarn）

这是最常见的使用场景。如果你的项目基于Node.js，或者使用了Webpack、Vite、Rollup等现代前端构建工具，通过包管理器安装是最规范的方式。

打开你的终端，进入项目根目录，然后执行：

使用npm安装：

npm install json5

这会将json5包安装到你的项目node_modules中，并将依赖记录到package.json的dependencies里（如果是项目运行时依赖）或devDependencies里（如果是构建配置等开发依赖）。

使用yarn安装：

yarn add json5

如果你更喜欢yarn，这条命令效果等同。

安装完成后，在Node.js脚本或CommonJS模块中，你可以这样引入并使用：

const JSON5 = require('json5');

const configText = `{
  port: 3000, // 服务器端口
  host: 'localhost',
}`;

const config = JSON5.parse(configText);
console.log(config.port); // 输出: 3000

如果你在ES模块环境中（比如在package.json中设置了"type": "module"，或者文件后缀是.mjs），则需要使用import语法：

import JSON5 from 'json5';

const config = JSON5.parse(`{ greeting: 'Hello JSON5' }`);
console.log(config.greeting);

2.2 在浏览器中直接使用（CDN）

有时候，你可能想在一个简单的HTML页面里直接体验JSON5，或者做一个不需要构建流程的小工具。这时候，通过CDN（内容分发网络）直接引入是最快的方法。你可以把JSON5的库文件像引入jQuery一样，通过<script>标签挂载到页面上。

这里我推荐使用一些知名的公共CDN服务，比如 jsdelivr 或 unpkg。它们通常提供了最新、最稳定的库版本。在HTML文件中，你可以这样写：