Triển khai mô-đun ES6, cách tải tệp json

Question 1

Tôi đang triển khai một ví dụ từ https://github.com/moroshko/react-autosuggest

Mã quan trọng như sau:

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);
}

Mã sao chép-dán này từ ví dụ (hoạt động), có lỗi trong dự án của tôi:

Error: Cannot resolve module 'json' in /home/juanda/redux-pruebas/components

Nếu tôi lấy ra tiền tố json !:

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

Bằng cách này, tôi không gặp lỗi tại thời điểm biên dịch (nhập xong). Tuy nhiên, tôi gặp lỗi khi thực thi nó:

Uncaught TypeError: _jsonfilesSuburbsJson2.default.filter is not a function

Nếu tôi gỡ lỗi nó, tôi có thể thấy vùng ngoại ô là một objectc, không phải là một mảng nên chức năng lọc không được xác định.

Tuy nhiên trong ví dụ được nhận xét gợi ý là một mảng. Nếu tôi viết lại các đề xuất như thế này, mọi thứ đều hoạt động:

  const suggestions = suburbs
  var suggestions = [ {
    'suburb': 'Abbeyard',
    'postcode': '3737'
  }, {
    'suburb': 'Abbotsford',
    'postcode': '3067'
  }, {
    'suburb': 'Aberfeldie',
    'postcode': '3040'
  } ].filter(suburbObj => suburbMatchRegex.test(suburbObj.suburb))

Vậy ... json! tiền tố đang làm gì trong quá trình nhập?

Tại sao tôi không thể đưa nó vào mã của mình? Một số cấu hình babel?

Question 2

Trước hết, bạn cần cài đặt json-loader:

npm i json-loader --save-dev

Sau đó, có hai cách bạn có thể sử dụng nó:

Để tránh thêm json-loadertừng thứ importbạn có thể thêm vào webpack.configdòng này:
```
loaders: [
  { test: /\.json$/, loader: 'json-loader' },
  // other loaders 
]
```
Sau đó nhập jsoncác tệp như thế này
```
import suburbs from '../suburbs.json';
```
Sử dụng json-loadertrực tiếp trong của bạn import, như trong ví dụ của bạn:
```
import suburbs from 'json!../suburbs.json';
```

Lưu ý: Trong webpack 2.*thay vì loaderscần sử dụng từ khóa rules.,

cũng webpack 2.*sử dụng json-loadertheo mặc định

Các tệp * .json hiện được hỗ trợ mà không có trình tải json. Bạn vẫn có thể sử dụng nó. Nó không phải là một thay đổi đột phá.

v2.1.0-beta.28

Question 3

json-loader không tải tệp json nếu đó là mảng, trong trường hợp này, bạn cần đảm bảo rằng nó có khóa, chẳng hạn

{
    "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 .....
]}

Question 4

Điều này chỉ hoạt động trên 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 };
});

Question 5

Sau khi json-loadercài đặt, bây giờ bạn có thể chỉ cần sử dụng:

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

hoặc, thậm chí đơn giản hơn:

import suburbs from '../suburbs';

Question 6

Tìm thấy chủ đề này khi tôi không thể tải a json-filevới ES6 TypeScript 2.6. Tôi tiếp tục gặp lỗi này:

TS2307 (TS) Không thể tìm thấy mô-đun 'json-loader! ./ ngoại ô.json'

Để nó hoạt động, tôi phải khai báo mô-đun trước. Tôi hy vọng điều này sẽ tiết kiệm một vài giờ cho ai đó.

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

...

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

Nếu tôi cố gắng bỏ qua loadertừ json-loadertôi đã nhận lỗi sau đây từ webpack:

THAY ĐỔI ĐỘT PHÁ: Không còn được phép bỏ qua hậu tố '-loader' khi sử dụng trình tải. Bạn cần chỉ định 'json-loader' thay vì 'json', hãy xem https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

Question 7

Nút v8.5.0 +

Bạn không cần trình tải JSON. Node cung cấp các Mô-đun ECMAScript (hỗ trợ Mô-đun ES6) với --experimental-modulescờ, bạn có thể sử dụng nó như thế này

node --experimental-modules myfile.mjs

Vậy thì nó rất đơn giản

import myJSON from './myJsonFile.json';
console.log(myJSON);

Sau đó, bạn sẽ có nó liên kết với biến myJSON.