Làm cách nào tôi có thể truy cập tệp json trong Ecmascript 6? Sau đây không hoạt động:

import config from '../config.json'

Điều này hoạt động tốt nếu tôi cố gắng nhập một tệp JavaScript.

Một cách giải quyết đơn giản:

config.js

export default
{
  // my json here...
}

sau đó...

import config from '../config.js'

không cho phép nhập các tệp .json hiện có, nhưng thực hiện công việc.

Trong TypeScript hoặc sử dụng Babel, bạn có thể nhập tệp json trong mã của mình.

// Babel

import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

Tham khảo: https://hackernoon.com/import-json-into-typescript-8d465beded79

Thật không may, ES6 / ES2015 không hỗ trợ tải JSON thông qua cú pháp nhập mô-đun. Nhưng ...

Có nhiều cách bạn có thể làm điều đó. Tùy thuộc vào nhu cầu của bạn, bạn có thể xem cách đọc tệp bằng JavaScript ( window.FileReadercó thể là một tùy chọn nếu bạn đang chạy trên trình duyệt) hoặc sử dụng một số trình tải khác như được mô tả trong các câu hỏi khác (giả sử bạn đang sử dụng NodeJS).

Cách đơn giản nhất của IMO có lẽ là chỉ cần đặt JSON làm đối tượng JS vào mô-đun ES6 và xuất nó. Bằng cách đó bạn chỉ có thể nhập nó ở nơi bạn cần.

Cũng đáng lưu ý nếu bạn đang sử dụng Webpack, nhập tệp JSON sẽ hoạt động theo mặc định (kể từ đó webpack >= v2.0.0).

import config from '../config.json';

Tôi đang sử dụng babel + browserify và tôi có một tệp JSON trong một thư mục ./i18n/locale-en.json với không gian tên dịch (sẽ được sử dụng với ngTranslate).

Không phải xuất bất cứ thứ gì từ tệp JSON (mà btw là không thể), tôi có thể thực hiện nhập mặc định nội dung của nó với cú pháp này:

import translationsJSON from './i18n/locale-en';

Nếu bạn đang sử dụng nút, bạn có thể:

const fs = require('fs');

const { config } = JSON.parse(fs.readFileSync('../config.json', 'utf8')) // May be incorrect, haven't used fs in a long time

HOẶC LÀ

const evaluation = require('../config.json');
// evaluation will then contain all props, so evaluation.config
// or you could use:
const { config } = require('../config.json');

Khác:

// config.js
{
// json object here
}

// script.js

import { config } from '../config.js';

HOẶC LÀ

import * from '../config.json'

Tùy thuộc vào công cụ xây dựng của bạn và cấu trúc dữ liệu trong tệp JSON, nó có thể yêu cầu nhập default.

import { default as config } from '../config.json';

ví dụ như sử dụng trong Next.js

Hơi muộn một chút, nhưng tôi vừa vấp phải vấn đề tương tự trong khi cố gắng cung cấp phân tích cho ứng dụng web của mình có liên quan đến việc gửi phiên bản ứng dụng dựa trên phiên bản pack.json.

Cấu hình như sau: React + Redux, Webpack 3.5.6

Trình tải json không hoạt động nhiều kể từ Webpack 2+, vì vậy sau một vài lần nghịch với nó, cuối cùng tôi đã gỡ bỏ nó.

Giải pháp thực sự hiệu quả với tôi, chỉ đơn giản là sử dụng tìm nạp. Mặc dù điều này rất có thể sẽ thực thi một số thay đổi mã để thích ứng với cách tiếp cận không đồng bộ, nhưng nó hoạt động hoàn hảo, đặc biệt là thực tế là việc tìm nạp sẽ cung cấp giải mã json khi đang bay.

Vì vậy, đây là:

  fetch('../../package.json')
  .then(resp => resp.json())
  .then((packageJson) => {
    console.log(packageJson.version);
  });

Xin lưu ý rằng vì chúng ta đang nói về gói.json cụ thể ở đây, nên tệp sẽ không được gói trong bản dựng sản xuất của bạn (hoặc thậm chí là dành cho vấn đề đó), vì vậy bạn sẽ phải sử dụng CopyWebpackPlugin để có quyền truy cập vào nó khi sử dụng tìm nạp.

Trong trình duyệt có tìm nạp (về cơ bản tất cả chúng bây giờ):

Hiện tại, chúng tôi không thể importcác tệp có loại mime JSON, chỉ các tệp có loại mime JavaScript. Nó có thể là một tính năng được thêm vào trong tương lai ( thảo luận chính thức ).

fetch('./file.json')
  .then(response => response.json())
  .then(obj => console.log(obj))

Trong Node.js v13.2 +:

Hiện tại nó yêu cầu --experimental-json-modulescờ , nếu không nó không được hỗ trợ theo mặc định.

Hãy thử chạy

node --input-type module --experimental-json-modules --eval "import obj from './file.json'; console.log(obj)"

và xem nội dung obj xuất ra trên bàn điều khiển.