使用带有 webpack 的 javascript 导入包含函数的 json 文件答案

【问题标题】：import json file that contains a function using javascript with webpack使用带有 webpack 的 javascript 导入包含函数的 json 文件
【发布时间】：2021-06-25 18:49:01
【问题描述】：

据我了解，json 规范首先支持方法/函数。

我有以下 json 文件用作测试夹具。

{
  "tokenParsed": {
    "preferred_username": "Test User"
  },
  "hasResourceRole": function () {
    return function (role, resource) {
      if (role && resource) {
        return true
      }
    }
  }
}

如果我尝试将文件导入到我的 VueJS 项目中

import { keycloak_test_user } from './fixtures/keycloak_test_user.json'

我收到以下错误

SyntaxError: Unexpected token ( in JSON at position 89
        at JSON.parse (<anonymous>)

      2 | import Vuex from 'vuex'
      3 | import Permission from '@/components/user/Permission.vue'
    > 4 | import { keycloak_test_user } from './fixtures/keycloak_test_user.json'

如果我直接将它添加到我的测试文件中而不是导入它，上面的 json 可以正常工作。

虽然错误显示 JSON.parse，但我不确定这是因为 webpack 没有正确加载文件，还是 JSON.parse 是错误的直接原因，但是，即使 VSCode json 格式将函数视为无效的 json。

【问题讨论】：

标签： json webpack

【解决方案1】：

一般情况下，您不能将函数存储在 json 中。有很多方法可以做到，但这并不意味着这是一个好主意。检查the accepted answer in this stackoverflow question 以获得可能的解决方案。不过我不建议这样做，并首先问问自己为什么需要存储该函数以及是否有更好的解决方案来解决您的问题。

【讨论】：

因为 Keycloak 在登录时返回的 json 对象中返回帮助函数，而我正在测试的代码依赖于这些方法和函数。 JSON 对方法/函数具有一流的支持

【解决方案2】：

我已经解决了这个问题，方法是将我的 .json 文件替换为 .js 文件，就像这样

  const keycloak = {
    tokenParsed: {
      preferred_username: "Test User"
    },
    hasResourceRole: () => {
      return (role, resource) => {
        if (role && resource) {
          return true
        }
      }
    }
  }

  export default keycloak

然后我可以正常导入

import keycloak from './fixtures/keycloak_test_user'

【讨论】：