导入JSON文件

Question

这里时的WebPack错误是打破了简单的测试案例：

首先，保存从节点JSON文件：

const fs = require('fs') 

let test = { 
    foo: [ 
    { 1: 'a'}, 
    { 2: 'b'} 
    ] 
}; 

fs.writeFileSync('./test.json', JSON.stringify(test), 'utf-8'); 

然后，尝试导入此JSON到一个js文件是的WebPack处理（我用的是最新版本的WebPack的，3.4.1）：

import test from './test.json'; 

console.log(test); 

这失败，出现以下错误：

ERROR in ./test.json          
Module build failed: SyntaxError: Unexpected token, expected ; (1:6) 

> 1 | {"foo":[{"1":"a"},{"2":"b"}]} 

控制台输出指向的冒犯角色是“foo”后面的冒号。

我的WebPack配置很简单，只有这些module选项：

module: { 
    rules: [ 
     { 
     test: /\.js/, 
     exclude: [ path.resolve(__dirname, 'node_modules') ], 
     loader: 'babel-loader' 
     }, 
     { 
     test: /\.css$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: "style-loader", 
      use: "css-loader" 
     }) 
     } 
    ] 
    }, 

困惑，我打开了JSON加载页面，告诉我说：

Since webpack >= v2.0.0, importing of JSON files will work by default.

由于我使用的WebPack v。3.4.1，我认为json-loader是不必要的。尽管如此，出于绝望，我增加了以下规则的WebPack配置的模块领域：

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

这其实工作！ json文件被加载，错误消失。

所以我的问题是：是我做错了Webpack试图导入json文件，或者是最新的Webpack莫名关于导入json文件？

Answer 1

您用于.js规则的正则表达式也匹配.json，因为您正在查找的所有路径都是.js。下面的一切会匹配成功（其中大部分是不太可能被进口，甚至存在）：

file.js 
file.json 
file.js.backup 
.js/file.css 
.jshintrc 

test.json正则表达式，这意味着你申请babel-loader它匹配。 Babel只接受JavaScript，JSON将无法解析。它抱怨冒号的原因是（:）是因为在ES6中，你可以用大括号创建一个新的作用域。例如：

const msg = "Outer"; 

// Entering new scope 
{ 
    // msg is free in this scope, shadows the outer one. 
    const msg = "Inner"; 
    console.log(msg); // Inner 
} 
// Exiting scope 

console.log(msg); // Outer 

// SyntaxError: Identifier 'msg' has already been declared 
const msg = "Re-definition"; 

我不认为有在JavaScript中的这许多用途，但它在其他语言中使用了很多（例如Rust）。 JSON的开头大括号启动了一个新的作用域，而不是一个对象，冒号在JavaScript中的一个字符串后无效。

要不适，你只需要在路径的末尾匹配.js，通过使用$锚（字符串的结尾），比如你用.css规则做babel-loader到.json文件。

{ 
    test: /\.js$/, 
    exclude: [ path.resolve(__dirname, 'node_modules') ], 
    loader: 'babel-loader' 
},