hjson的使用，一个配置文件神器

我有柚子茶噢

已于 2022-09-27 15:18:36 修改

阅读量967

点赞数 2

文章标签：前端 javascript

于 2022-09-27 15:16:34 首次发布

本文链接：https://blog.csdn.net/qq_46160082/article/details/127071361

版权

写在前面：

日常开发大项目时，常常是后台、前端、运维协同进行，同时也分开发环境和上线环境，有些特殊情况还分局域网络的限制。此等情况下，代码配置文件抽离变得十分重要，往往是在开发环境将变化封装到配置文件中，发布到现场后，更改配置文件即可跑通现场环境。

配置文件，大家第一反应想到的肯定是json格式数据，因为这是前后端整个网络通信的核心通用数据交换格式，将配置数据一json键值对格式存储，留插槽让用户自定义岂不美哉。但是用过的都知道，这个json有点严格：

不允许换行
单引号双引号要求严格
不能写注释

光最后一条就可以直接劝退了。

这种情况下，Hjson的出现就很好的解决了这个问题，使用步骤：

1.vscode下载Hjson插件

目的是让Vscdoe编译器能够识别hjson结尾的文件

2.项目中引入hjson库

注意一下，库是小写，目的是为了在代码中使用数据时，保证其能够转回成json。

否则直接请求hjson文件，将被视为一段 string 而不是键值对的Object

yarn add hjson

3.有个小坑

需要手动引入polyfill 原因是由于在webpack5中移除了nodejs核心模块的polyfill自动引入

安装命令：

yarn add node-polyfill-webpack-plugin -D

vue.config.js配置：

const { defineConfig } = require('@vue/cli-service')
// 头部引入
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  }
})

3.使用方式

这里使用根据实际情况来定

小项目可以直接引入使用，像下面这样

import axios from "axios";
import Hjson from "hjson";
  
async created() {
    const res = await axios.get(
      "./mockdata/test.hjson"
    );
    const resData = Hjson.parse(res.data);
  },

大项目可以分模块管理，然后采用封装axios的方式进行静态文件请求

// 统一采用Hjson格式化，然后反转请求结果json
export const JGET = async (url, serviceName) => {
  try {
    const res = await axios.get(url, {
      // 阻止 axios 自动格式化
      transformResponse: undefined,
      // 不缓存 hjson
      headers: {
        "Cache-Control": "no-cache, no-store, must-revalidate",
        "Access-Control-Allow-Origin": "*"
      }
    });
    return Hjson.parse(res.data);
  } catch (error) {
    console.error(error);
    Message.error("error.message")
  }
};