javascript - 使用 Webpack 通过 JSON 文件配置 Angular

Question

我的 Angular 应用程序配置有 JSON 文件。我通过 HTTP GET 加载它，但最近决定通过使用定义文件向 TypeScript 添加 JSON 支持来直接包含它:

declare module "*.json" {
    const value: any;
    export default value;
}

然后在需要的地方导入它:

import * as config from '../config.json';

这很好用； config 是 JSON 对象本身。

问题是我正在与 Webpack 捆绑，我希望 JSON 文件位于包中，但不与其他任何东西捆绑，即 config.json 应该是它自己的文件放在包中，而不是与其他文件捆绑在一起。

我尝试使用 file-loader 执行此操作和 move-file-loader :

module: {                                                                    
    rules: [  
    // ...  
    {                                                                        
       test: /\.json$/,                                                       
       loader: 'file-loader?name=[name].json'                                 
    }                                                      
    // OR                                                                    
    {                                                                
        test: /\.json$/,                                                     
        loader: "move-file-loader?name=[name].json!json-loader"              
    }
    // ...
    ]
}

这可以防止 JSON 文件被捆绑并将其放置在包中我想要的位置，但它也使 config 成为 JSON 文件的相对路径，即 ”。/config.json"，而不是 JSON 对象本身。

对于为什么会这样有什么想法吗？

Answer 1

显然文件加载器发出文件加载位置的路径，而不是文件内容本身。所以

import * as config from '../config.json';

将 config 制作为包含文件路径的字符串是正确的行为。

就 move-file-loader 而言，由于我将其与 json-loader 一起使用，因此“移动”文件的内容实际上是 TypeScript 模块定义，并且它似乎仍在加载捆绑版本文件的版本而不是“复制”的版本。

这些见解引导我得出以下解决方案:首先，我们将使用 Webpack 配置中的文件加载器复制 JSON 文件:

module: {                                                                    
    rules: [  
    // ...  
    {                                                                        
       test: /\.json$/,                                                       
       loader: 'file-loader?name=[name].json'                                 
    }
    // ...
    ]
}

然后我们将使用 TypeScript 的 require 语法导入文件加载器发出的文件路径

const configFile = require('../config.json');

此导入方法不需要我在问题中提到的 JSON 定义文件。

最后，我们可以通过 HTTP GET 从文件加载器路径加载文件:

http.get(configFile).map(res => res.json()).catch((error: any): any => {
    // ...
}).subscribe(config => {
    // ...
});

其中 config 是 JSON 文件的解析内容。

我不会立即将此标记为答案，以防有人知道如何在没有 HTTP 的情况下使其工作。