ES6module实现，如何加载一个json文件

IT技术 javascript json reactjs webpack
2021-02-01 23:25:26

我正在从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

如果我调试它，我可以看到郊区是一个对象，而不是数组，因此未定义过滤器函数。

但是，在示例中注释建议是一个数组。如果我重写这样的建议，一切正常：

  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 配置？

6个回答

首先你需要安装json-loader：

npm i json-loader --save-dev

然后，有两种方法可以使用它：

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

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

    然后json像这样导入文件

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

  2. json-loader直接在您的 中使用import，如您的示例所示：

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

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

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

*.json 文件现在支持没有 json-loader。你仍然可以使用它。这不是一个突破性的变化。

v2.1.0-beta.28

正如@alexander-t 提到的，您现在可以在没有 json-loader 的情况下导入 json 文件，但是，如果遇到无法识别 json-loader 的问题，您应该只在 loader 配置中添加一个“-loader”后缀像这样： { test: /\.json$/, loader: 'json-loader' }
2021-03-15 23:25:26
太感谢了！json-loader 的文档实际上显示了 webpack v2 的设置，所以对我没有任何作用（使用 v1！）。所以对于你们所有人来说，使用加载器，而不是规则！另外，将该对象内的“use”更改为“loader”，就像这个答案一样！
2021-03-24 23:25:26
如果通过typescript导入，为什么导入的 json 不会被复制到 outDir 中？
2021-03-26 23:25:26

json-loader 不会加载 json 文件，如果它是数组，在这种情况下，你需要确保它有一个键，例如

{
    "items": [
    {
      "url": "https://api.github.com/repos/vmg/redcarpet/issues/598",
      "repository_url": "https://api.github.com/repos/vmg/redcarpet",
      "labels_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/labels{/name}",
      "comments_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/comments",
      "events_url": "https://api.github.com/repos/vmg/redcarpet/issues/598/events",
      "html_url": "https://github.com/vmg/redcarpet/issues/598",
      "id": 199425790,
      "number": 598,
      "title": "Just a heads up (LINE SEPARATOR character issue)",
    },
    ..... other items in array .....
]}
这怎么回答？？？如果它没有加载这个特定的 json 文件，那么加载这样的 json 文件的方法是什么？？？
2021-03-15 23:25:26
不错，没想到！
2021-03-20 23:25:26

这仅适用于 React 和 React Native

const data = require('./data/photos.json');

console.log('[-- typeof data --]', typeof data); // object


const fotos = data.xs.map(item => {
    return { uri: item };
});

随着json-loader安装的，现在你可以简单地使用：

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

或者，更简单地说：

import suburbs from '../suburbs';

当我无法加载json-filewith时找到了这个线程ES6 TypeScript 2.6。我不断收到此错误：

TS2307 (TS) 找不到module 'json-loader!./suburbs.json'

为了让它工作，我必须先声明module。我希望这会为某人节省几个小时。

declare module "json-loader!*" {
  let json: any;
  export default json;
}

...

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

如果我尝试省略loaderfromjson-loader我收到以下错误webpack：

突破性变化：不再允许在使用加载器时省略“-loader”后缀。您需要指定 'json-loader' 而不是 'json'，参见https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

其它你可能感兴趣的问题
上一篇使用 UIWebView 从 HTML 代码调用目标 c 代码中的方法 下一篇有没有办法检查地理位置是否已被 Javascript 拒绝？