我正在实现 https://github.com/moroshko/react-autosuggest 中的一个示例
重要的代码是这样的:
import React, { Component } from 'react';
import suburbs from 'json!../suburbs.json';
function getSuggestions(input, callback) {
const suggestions = suburbs
.filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))
.sort((suburbObj1, suburbObj2) =>
suburbObj1.suburb.toLowerCase().indexOf(lowercasedInput) -
suburbObj2.suburb.toLowerCase().indexOf(lowercasedInput)
)
.slice(0, 7)
.map(suburbObj => suburbObj.suburb);
// 'suggestions' will be an array of strings, e.g.:
// ['Mentone', 'Mill Park', 'Mordialloc']
setTimeout(() => callback(null, suggestions), 300);
}
示例中的这个复制粘贴代码(有效)在我的项目中有一个错误:
Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components
如果我去掉前缀 json!:
import suburbs from '../suburbs.json';
这样我在编译时不会出错(导入完成)。 但是当我执行它时出现错误:
Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function
如果我调试它,我可以看到郊区是一个 objectc,而不是一个数组,所以没有定义过滤函数。
但是在示例中被注释的建议是一个数组。如果我重写这样的建议,一切正常:
const suggestions = suburbs
var suggestions = [ {
'suburb': 'Abbeyard',
'postcode': '3737'
}, {
'suburb': 'Abbotsford',
'postcode': '3067'
}, {
'suburb': 'Aberfeldie',
'postcode': '3040'
} ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))
那么...什么json!前缀是在做什么进口的?
为什么我不能把它放在我的代码中?一些 babel 配置?
最佳答案
首先你需要安装json-loader
:
npm i json-loader --save-dev
那么,有两种方法可以使用它:
为了避免添加
json-loader
在每个import
你可以添加到webpack.config
这一行:loaders: [ { test: /\.json$/, loader: 'json-loader' }, // other loaders ]
然后像这样导入
json
文件import suburbs from '../suburbs.json';
使用
json-loader
直接在您的import
中,如您的示例:import suburbs from 'json!../suburbs.json';
注意:
在 webpack 2.*
代替关键字 loaders
需要使用 rules
.,
也 webpack 2.*
默认使用 json-loader
*.json files are now supported without the json-loader. You may still use it. It's not a breaking change.
关于javascript - ES6 模块实现,如何加载 json 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33650399/