Webpack 不解析 JSON答案

【问题标题】：Webpack not parsing JSONWebpack 不解析 JSON
【发布时间】：2018-03-19 21:48:45
【问题描述】：

我正在尝试将 JSON 文件加载到我的 ReactJS 应用程序中，但我尝试了以下任何方法：

要求：

const countries =require('../../json/countries.json');

// Also fails the exact same way with redundant parse call:
const countries = JSON.parse(require('../../json/countries.json'));

使用json-loader导入：

import countries from '../../json/countries.json';

在loaders中使用以下加载器

{
    test: /\.json$/,
    loader: 'json-loader'
}

JSON 加载，但解析失败：

./src/app/json/countries.json
    Module build failed: SyntaxError: /src/app/json/countries.json: 
Unexpected token, expected ; (2:6)

  1 | {
> 2 |   "BD": "Bangladesh",
    |       ^
  3 |   "BE": "Belgium",
  4 |   "BF": "Burkina Faso",
  5 |   "BG": "Bulgaria",

country.json 文件是从http://country.io 下载的有效 JSON，但引号似乎引起了问题。但这是由 JavaScript 加载的有效 JSON，因此它应该可以无缝协同工作。

知道问题出在哪里吗？

已解决

我通过将loader 指令更改为use 解决了这个问题：

let config = {
    module: {
        loaders: [
           ...
            {
                test: /\.json$/,
                use: {
                    loader: 'json-loader'
                }
            }
        ]
    }
};

【问题讨论】：

我不明白，你为什么要解析 json？它已经是一个 javascript 对象，而不是字符串。
我建议 JSON stackoverflow.com/questions/5543490/json-naming-convention的驼峰式约定@
我只是在没有它的情况下出现错误后才尝试解析。其他事情正在发生。
@SamDev 这是带有两个字母国家代码的键/值映射。我看不出钥匙的大小如何影响任何事情。
@mwieczorek 可能是命名约定（变量应以小写字母开头）

标签： json reactjs webpack

【解决方案1】：

您已经在加载一个json 文件，无需解析它。
如果它是一个字符串，你可以解析它。
下面是一个小例子来说明区别：

const json = {
  "BD": "Bangladesh",
  "BE": "Belgium",
  "BF": "Burkina Faso",
  "BG": "Bulgaria"
}

const strJson = `{
  "BD": "Bangladesh",
  "BE": "Belgium",
  "BF": "Burkina Faso",
  "BG": "Bulgaria"
}`

console.log('string parsed to a json',JSON.parse(strJson));
console.log('regular json',json);

【讨论】：

在不解析的情况下使用它也不起作用：const countries = require('../../json/countries.json');
aw，你说 “JSON 加载，但无法解析” 所以我认为加载它没有问题。加载后你会得到什么？有什么错误吗？