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配置中使用file-loader复制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的情况下使其工作。

使用Webpack通过JSON文件配置Angular

1 个答案: