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

问题描述

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

I have a web-app that requires a configuration JSON file which contains end-points and other required start-up parameters.

如果我使用json-loader，则该文件不是真实的json"，它将看起来像这样:

If I use the json-loader, the file is not "real json", it'll look something like this:

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

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

What I would like is plain old JSON which means it can be parsed and changed as part of a deployment process before being sent to the web server where it will be served from.

一种替代方法是使用文件加载器.但是，这意味着(即使这是一项琐碎的任务)，我必须编写代码以自己下载文件.我想让webpack处理这个问题并且可以使用.

An alternative is to use the file-loader. However, that means that (even though it's a trivial task) I have to write the code to download the file myself. I would like to have webpack handle this and be available.

是否可以通过require JSON文件(以普通JSON文件形式编写并在运行时导入)?

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，该IIFE返回对所需文件的承诺.

Webpack acts on compile-time. That means when you require a file, it loads that file, performs modifications as specified by the loader-chain and exports you the final result from that chain. So what you're asking for sounds like a loader, that acts like a file-loader, but exports an IIFE that returns a promise for the required file.

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

In theory it's possible to have a webpack loader, lets say an async-file-loader that gets the input from the file-loader will handle the async requst for you. Let's assume something like:

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

但随后，用于处理请求的整个逻辑将被限制在该调用内. async-file-loader看起来像这样:

But then the whole logic for handling the request would be boundled within that call. The async-file-loader would look something like this:

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

非常讨厌...

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

When you want to load your json-file in runtime, I'll see 2 options:

1. 使用文件加载器并自行异步请求json文件.
2. 使用服务器端脚本语言并将配置注入.html文件.如果您使用的是nodejs并在后端进行举例说明，则可以使用 Cheerio ，然后再处理请求.

1. use the file-loader and request the json file asyncronously on your own.
2. use a server-sided scripting language and inject the config into the .html file. If your're using nodejs and express for example on your backend side, you could easily inject the config using Cheerio before serving the request.

这篇关于使用Webpack将JSON捆绑为纯JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！