javascript - 使用 Webpack 将 JSON 打包为纯 JSON 文件

Question

我有一个网络应用程序需要一个配置 JSON 文件，其中包含端点和其他所需的启动参数。

如果我使用 json-loader，文件不是“真正的 json”，它看起来像这样:

module.exports = {
    "name": "foo",
    "key": true,
};

我想要的是普通的旧 JSON，这意味着它可以作为部署过程的一部分进行解析和更改，然后再发送到将从中提供服务的 Web 服务器。

另一种方法是使用文件加载器。然而，这意味着(尽管这是一项微不足道的任务)我必须自己编写代码来下载文件。我想让 webpack 处理这个并且可用。

有没有一种方法可以要求一个 JSON 文件，它被编写为一个普通的 JSON 文件并在运行时导入？

Answer 1

Is there a way that I can require a JSON file, which is written as a plain-old JSON file and imported at run time?

Webpack 在编译时起作用。这意味着当您需要一个文件时，它会加载该文件，执行加载程序链指定的修改并从该链中导出最终结果。所以你要求的听起来像一个加载器，它的行为像一个文件加载器，但导出一个 IIFE，它返回对所需文件的 promise 。

理论上，有一个 webpack 加载器是可能的，比方说一个从文件加载器获取输入的 async-file-loader 将为您处理异步请求。让我们假设这样的事情:

const promisedFile = require('async-file-loader!file-loader!./myJson.json');
promisedFile.then(file => { console.log(JSON.parse(file)); });

但是处理请求的整个逻辑将被绑定(bind)在该调用中。异步文件加载器看起来像这样:

module.exports = function(source) {
    return `module.exports = eval("(function(url){
      /* define async request func, preform request and return promise in here */
   })(${url})")`;
}

非常讨厌...

当您想在运行时加载 json 文件时，我会看到 2 个选项:

1. 使用文件加载器并自行异步请求 json 文件。
2. 使用服务器端脚本语言并将配置注入(inject) .html 文件。如果您在后端使用 nodejs 和 express，则可以使用 Cheerio 轻松注入(inject)配置。在服务请求之前。