ES6 模块实现，如何加载 json 文件-前端问题

ES6 modules implementation, how to load a json file(ES6 模块实现，如何加载 json 文件)

本文介绍了ES6 模块实现，如何加载 json 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在实施一个来自 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);
}


示例中的这个复制粘贴代码(有效)在我的项目中有一个错误:
This copy-paste code from the example (that works), has an error in my project:
Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components

如果我去掉前缀 json!:
If I take out the prefix json!:
import suburbs from '../suburbs.json';

这样我在编译时不会出错(导入完成).但是当我执行它时出现错误:
This way I got not errors at compile time (import is done).
However I got errors when I execute it:
Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function

如果我调试它，我可以看到郊区是一个 objectc，而不是一个数组，所以没有定义过滤函数.
If I debug it I can see suburbs is an objectc, not an array so filter function is not defined.
但是在示例中被注释的建议是一个数组.如果我重写这样的建议，一切正常:
However in the example is commented suggestions is an array. If I rewrite suggestions like this, everything works:
  const suggestions = suburbs
  var suggestions = [ {
    'suburb': 'Abbeyard',
    'postcode': '3737'
  }, {
    'suburb': 'Abbotsford',
    'postcode': '3067'
  }, {
    'suburb': 'Aberfeldie',
    'postcode': '3040'
  } ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))

那么...什么json！前缀是在做什么进口的?
So... what json! prefix is doing in the import? 
为什么我不能把它放在我的代码中?一些 babel 配置?
Why can't I put it in my code? Some babel configuration?
推荐答案

首先需要安装<代码>json-loader:

First of all you need to install json-loader:

npm i json-loader --save-dev

那么，有两种方法可以使用它:

Then, there are two ways how you can use it:

为了避免添加json-loader在每个 import 你可以添加到 webpack.config 这一行:

In order to avoid adding json-loader in each import you can add to webpack.config this line:

loaders: [
  { test: /.json$/, loader: 'json-loader' },
  // other loaders 
]

然后像这样导入json文件

import suburbs from '../suburbs.json';

直接在你的 json-loader代码>导入，如您的示例:

import suburbs from 'json!../suburbs.json';

注意:在 webpack 2.* 代替关键字 loaders 需要使用 rules.,

也 webpack 2.* 默认使用 json-loader

*.json 文件现在支持不带 json-loader.你仍然可以使用它.这不是重大变化.

*.json files are now supported without the json-loader. You may still use it. It's not a breaking change.

v2.1.0-beta.28



                        这篇关于ES6 模块实现，如何加载 json 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！