使用json5让json带上注释

让json带上注释需要使用json5这个库，下面逐步介绍json5在打包工具中的配置过程。

A: 对于webpack+ts项目，按照下面的步骤配置和测试

1. 安装依赖
   yarn add -D json5-loader

2. webpack使用此loader

// 在webpack.config.js中使用加载器处理扩展名为json5的文件  
{  
    test: /\.json5$/,  
    use: 'json5-loader'  
},

3. 增加json5扩展名
   在webpack.config.js的resolve.extensions中增加'.json5'

4. 修改VScode配置，使之不对*.json5报错
   .vscode/setting.json中增加

"files.associations": {  
"*.json5": "jsonc",  
"*.json": "json",  
}

5. 将json5声明为模块
   在src下面找到global.d.ts，增加
   declare module '*.json5'

6. 测试和使用
   新建一个json5文件：touch data.json5 其中的内容为：

{  
/* 这个是带注释的json文件 */  
"name": "zs",  
"age": "18"  
}

然后在某个文件中引入：

import data from './data';  
// const data = require('./data.json5').default;  
console.log(data);  
>>>  
{name: 'zs', age: '18'}

B: 对于rollup+ts项目

1. 安装依赖
   yarn add -D rollup-plugin-json5

2. rollup使用此插件

// rollup.config.js
import json from 'rollup-plugin-json5';  
plugins: [  
...  
json(),  
...  
]

3. 在tsconfig.json中允许导入json文件
   "resolveJsonModule": true,

4. 修改VScode配置，使之不对注释之后的*.json报错
   .vscode/setting.json中增加

"files.associations": {  
"*.json": "jsonc",  
}

5. 测试和使用

新建一个json文件：touch data.json

其中的内容为：

{  
/* 这个是带注释的json文件 */  
"name": "zs",  
"age": "18"  
}

然后在某个文件中引入：

import data from './data.json';  
// const data = require('./data.json').default;  
console.log(data);

>>>  
{name: 'zs', age: '18'}

需要注意的是，如果打包工具用的是webpack则需要使用json5作为扩展名，而是用rollup的话，扩展名保持json即可。