使用 Webpack 将 JSON 捆绑为纯 JSON 文件答案

【问题标题】：Bundle JSON as a plain JSON file with Webpack使用 Webpack 将 JSON 捆绑为纯 JSON 文件
【发布时间】：2016-08-20 12:57:36
【问题描述】：

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

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

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

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

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

有没有办法可以require 一个 JSON 文件，该文件被编写为一个普通的 JSON 文件并在运行时导入？

【问题讨论】：

非常类似于：stackoverflow.com/questions/34180983/…
为什么不直接使用fs 来读取文件？
不确定您的意思。如果它在浏览器中，这是行不通的。如果您的意思是作为 Webpack 构建的一部分，这将有何帮助？
@RayBooysen 你在使用 Webpack2 吗？您可以使用 Webpack2 导入 JSON 文件。请注意，webpack 只能理解 JavaScript。
嗨@zero。我正在使用 webpack 2。如前所述，导入 JSON 文件使用 JSON-loader，这意味着您的 json 看起来像上面的示例。 IE。它看起来像 module.exports = {}。只要有支持它的加载器，Webpack 就可以理解任何类型的输入。 CSS-Loader、Typescript 加载器等

标签： javascript json webpack

【解决方案1】：

有没有办法可以require 一个 JSON 文件，它被写成普通的 JSON 文件并在运行时导入？

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

理论上，可以有一个 webpack 加载器，比如说一个从文件加载器获取输入的 async-file-loader 将为您处理异步请求。让我们假设：

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

但是处理请求的整个逻辑将被限制在该调用中。异步文件加载器看起来像这样：

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

真恶心……

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

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

【讨论】：

谢谢@ShabbY。选项 1 正是我们现在正在做的，但希望避免。

【解决方案2】：

正如上面 ShabbY 所说，Webpack 是一个模块捆绑器，可以提前编译你的文件。

听起来您需要在构建时间之后添加一个配置文件（json）才能在运行时访问。为此，一种解决方案是使用普通的 ajax 调用加载文件，而不是尝试将其与 Webpack 捆绑。

【讨论】：

明白。但是，我想我想要的是一个加载器，给定一个文件只是从网络上提取文件。类似于文件加载器。