ฉันจะเข้าถึงไฟล์ json ใน Ecmascript 6 ได้อย่างไร ต่อไปนี้ใช้ไม่ได้:

import config from '../config.json'

สิ่งนี้ใช้ได้ดีถ้าฉันพยายามนำเข้าไฟล์ JavaScript

วิธีแก้ปัญหาง่ายๆ:

config.js

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

แล้ว ...

import config from '../config.js'

ไม่อนุญาตให้นำเข้าไฟล์. json ที่มีอยู่ แต่ทำงาน

ใน TypeScript หรือใช้ Babel คุณสามารถนำเข้าไฟล์jsonในรหัสของคุณ

// Babel

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

การอ้างอิง: https://hackernoon.com/import-json-into-typescript-8d465beded79

น่าเสียดายที่ ES6 / ES2015 ไม่รองรับการโหลด JSON ผ่านทางไวยากรณ์การนำเข้าโมดูล แต่ ...

มีหลายวิธีที่คุณสามารถทำได้ ขึ้นอยู่กับความต้องการของคุณคุณสามารถดูวิธีการอ่านไฟล์ใน JavaScript ( window.FileReaderอาจเป็นตัวเลือกหากคุณใช้งานในเบราว์เซอร์) หรือใช้ตัวโหลดอื่น ๆ ตามที่อธิบายไว้ในคำถามอื่น ๆ (สมมติว่าคุณใช้ NodeJS)

IMO วิธีที่ง่ายที่สุดน่าจะเป็นเพียงแค่วาง JSON เป็นวัตถุ JS ลงในโมดูล ES6 และส่งออก ด้วยวิธีนี้คุณสามารถนำเข้าได้ตามที่คุณต้องการ

นอกจากนี้ยังควรระวังหากคุณใช้ Webpack การอิมพอร์ตไฟล์ JSON จะทำงานตามค่าเริ่มต้น (ตั้งแต่webpack >= v2.0.0)

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

ฉันใช้ babel + browserify และฉันมีไฟล์ JSON ในไดเรกทอรี. / i18n/locale-en.json พร้อม namespace การแปล (เพื่อใช้กับ ngTranslate)

โดยไม่ต้องส่งออกอะไรจากไฟล์ JSON (ซึ่งเป็นไปไม่ได้ btw) ฉันสามารถสร้างการนำเข้าเริ่มต้นของเนื้อหาด้วยไวยากรณ์นี้:

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

หากคุณใช้โหนดคุณสามารถ:

const fs = require('fs');

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

หรือ

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

อื่น:

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

// script.js

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

หรือ

import * from '../config.json'

ทั้งนี้ขึ้นอยู่กับการสร้างเครื่องมือและโครงสร้างข้อมูลภายในแฟ้ม JSON defaultของคุณก็อาจต้องนำเข้า

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

เช่นการใช้งานภายใน Next.js

ช้าไปหน่อย แต่ฉันเพิ่งเจอปัญหาเดียวกันในขณะที่พยายามให้การวิเคราะห์แอปพลิเคชันเว็บของฉันที่เกี่ยวข้องกับการส่งเวอร์ชันของแอปตามเวอร์ชัน package.json

การกำหนดค่ามีดังนี้: React + Redux, Webpack 3.5.6

ตัวโหลด json ไม่ได้ทำอะไรมากมายตั้งแต่ Webpack 2+ ดังนั้นหลังจากเล่นซอมันฉันก็เลยเอามันออก

วิธีแก้ปัญหาที่ใช้งานได้จริงสำหรับฉันคือการใช้การดึง แม้ว่านี่อาจจะบังคับให้มีการเปลี่ยนแปลงรหัสบางอย่างเพื่อปรับให้เข้ากับวิธีการแบบอะซิงก์ แต่มันก็ทำงานได้อย่างสมบูรณ์แบบ

ดังนั้นนี่คือ:

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

โปรดจำไว้ว่าเนื่องจากเรากำลังพูดถึง package.json โดยเฉพาะที่นี่ไฟล์มักจะไม่รวมอยู่ในบิลด์การผลิตของคุณ (หรือแม้แต่ dev สำหรับเรื่องนั้น) ดังนั้นคุณจะต้องใช้ CopyWebpackPlugin เพื่อเข้าถึง เมื่อใช้การดึงข้อมูล

ในเบราว์เซอร์ที่มีการดึงข้อมูล (โดยพื้นฐานแล้วทั้งหมดนี้):

ในขณะนี้เราไม่สามารถimportไฟล์ที่มีประเภท mime ของ JSON ได้เฉพาะไฟล์ที่มีประเภท JavaScript mime มันอาจจะเป็นคุณสมบัติที่เพิ่มเข้ามาในอนาคต ( การสนทนาอย่างเป็นทางการ )

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

ใน Node.js v13.2 +:

ขณะนี้ต้องใช้การ--experimental-json-modulesตั้งค่าสถานะมิฉะนั้นจะไม่ได้รับการสนับสนุนตามค่าเริ่มต้น

ลองวิ่ง

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

และดูเนื้อหา obj แสดงผลไปยังคอนโซล