Bagaimana saya bisa mengakses file json di Ecmascript 6? Berikut ini tidak berfungsi:

import config from '../config.json'

Ini berfungsi dengan baik jika saya mencoba mengimpor file JavaScript.

Solusi sederhana:

config.js

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

kemudian...

import config from '../config.js'

tidak mengizinkan impor file .json yang ada, tetapi melakukan pekerjaan.

Dalam TypeScript atau menggunakan Babel, Anda dapat mengimpor file json dalam kode Anda.

// Babel

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

Referensi: https://hackernoon.com/import-json-into-typescript-8d465beded79

Sayangnya ES6 / ES2015 tidak mendukung memuat JSON melalui sintaks impor modul. Tapi ...

Ada banyak cara untuk melakukannya. Tergantung pada kebutuhan Anda, Anda dapat melihat cara membaca file dalam JavaScript ( window.FileReaderbisa menjadi pilihan jika Anda menjalankan di browser) atau menggunakan beberapa loader lainnya seperti yang dijelaskan dalam pertanyaan lain (dengan asumsi Anda menggunakan NodeJS).

Cara paling sederhana IMO mungkin adalah dengan hanya menempatkan JSON sebagai objek JS ke dalam modul ES6 dan mengekspornya. Dengan begitu Anda bisa mengimpornya di tempat yang Anda butuhkan.

Juga patut dicatat jika Anda menggunakan Webpack, mengimpor file JSON akan berfungsi secara default (sejak webpack >= v2.0.0).

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

Saya menggunakan babel + browserify dan saya memiliki file JSON di direktori ./i18n/locale-en.json dengan terjemahan namespace (untuk digunakan dengan ngTranslate).

Tanpa harus mengekspor apa pun dari file JSON (yang tidak mungkin dilakukan oleh btw), saya dapat membuat impor default kontennya dengan sintaks ini:

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

Jika Anda menggunakan simpul, Anda dapat:

const fs = require('fs');

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

ATAU

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

Lain:

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

// script.js

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

ATAU

import * from '../config.json'

Bergantung pada perkakas bangunan Anda dan struktur data dalam file JSON, mungkin perlu mengimpor default.

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

mis. penggunaan di dalam Next.js

Sedikit terlambat, tetapi saya hanya menemukan masalah yang sama ketika mencoba memberikan analisis untuk aplikasi web saya yang melibatkan pengiriman versi aplikasi berdasarkan versi package.json.

Konfigurasi adalah sebagai berikut: React + Redux, Webpack 3.5.6

Json-loader tidak melakukan banyak hal sejak Webpack 2+, jadi setelah beberapa mengutak-atiknya, saya akhirnya menghapusnya.

Solusi yang benar-benar bekerja untuk saya, hanya menggunakan fetch. Sementara ini kemungkinan besar akan memberlakukan beberapa perubahan kode untuk beradaptasi dengan pendekatan async, itu bekerja dengan sempurna, terutama mengingat fakta bahwa fetch akan menawarkan json decoding on the fly.

Jadi begini:

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

Perlu diingat, bahwa karena kita berbicara tentang package.json khusus di sini, file tersebut biasanya tidak akan disertakan dalam build produksi Anda (atau bahkan dev dalam hal ini), jadi Anda harus menggunakan CopyWebpackPlugin untuk memiliki akses ke saat menggunakan fetch.

Di browser dengan fetch (pada dasarnya semuanya sekarang):

Saat ini, kami tidak dapat importfile dengan tipe mime JSON, hanya file dengan tipe mime JavaScript. Mungkin fitur yang ditambahkan di masa depan ( diskusi resmi ).

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

Dalam Node.js v13.2 +:

Saat ini membutuhkan --experimental-json-modulesbendera , jika tidak didukung secara default.

Coba jalankan

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

dan lihat konten obj yang dikeluarkan untuk konsol.