json - कैसे एक जावास्क्रिप्ट फ़ाइल में आयात करने के लिए कैसे 6?



import ecmascript-6 (5)

मैं एक जावास्क्रिप्ट फ़ाइल को एक्मास्क्रिप्ट 6 में कैसे एक्सेस कर सकता हूं? निम्नलिखित काम नहीं करता है:

import config from '../config.json'

यह ठीक काम करता है अगर मैं जावास्क्रिप्ट फ़ाइल आयात करने की कोशिश करता हूं।

https://ffff65535.com


आपकी बिल्ड टूलिंग और JSON फ़ाइल के भीतर डेटा संरचना के आधार पर, इसे default आयात करने की आवश्यकता हो सकती है।

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

जैसे Next.js भीतर उपयोग


एक सरल समाधान:

config.js

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

फिर...

import config from '../config.js'

मौजूदा .json फ़ाइलों के आयात की अनुमति नहीं देता है, लेकिन नौकरी करता है।


थोड़ी देर हो गई, लेकिन मैं अपने वेब ऐप के लिए एनालिटिक्स प्रदान करने की कोशिश करते समय एक ही समस्या से टकरा गया, जिसमें पैकेज.जन संस्करण के आधार पर ऐप संस्करण भेजना शामिल था।

कॉन्फ़िगरेशन निम्नानुसार है: प्रतिक्रिया + Redux, वेबपैक 3.5.6

वेब-पैक 2+ के बाद से जोंस-लोडर बहुत कुछ नहीं कर रहा है, इसलिए इसके साथ कुछ गड़बड़ होने के बाद, मैंने इसे हटा दिया।

समाधान जो वास्तव में मेरे लिए काम कर रहा था, बस भ्रूण का उपयोग कर रहा था। हालांकि यह सबसे अधिक संभवतया कुछ कोड परिवर्तन को लागू करने के लिए async दृष्टिकोण के अनुकूल होगा, इसने पूरी तरह से काम किया, विशेष रूप से इस तथ्य को देखते हुए कि भ्रूण मक्खी पर जक्सन डिकोडिंग की पेशकश करेगा।

तो यहाँ है:

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

ध्यान रखें, कि जब से हम पैकेज के बारे में बात कर रहे हैं। विशेष रूप से यहाँ पर, फ़ाइल आमतौर पर आपके निर्माण में बंडल नहीं आएगी (या उस मामले के लिए भी देव), तो आपको CopyWebpackPlugin का उपयोग करना होगा जब यह लाने का उपयोग कर।


दुर्भाग्य से ES6 / ES2015 मॉड्यूल आयात सिंटैक्स के माध्यम से JSON लोड करने का समर्थन नहीं करता है। लेकिन ...

ऐसे कई तरीके हैं जिनसे आप इसे कर सकते हैं। अपनी आवश्यकताओं के आधार पर आप या तो जावास्क्रिप्ट में फ़ाइलों को पढ़ने के लिए देख सकते हैं ( window.FileReader एक विकल्प हो सकता है यदि आप ब्राउज़र में चल रहे हैं) या अन्य प्रश्नों में वर्णित के रूप में कुछ अन्य लोडर का उपयोग करें (यह मानते हुए कि आप NodeJS का उपयोग कर रहे हैं)।

IMO का सबसे सरल तरीका शायद JSON को JS ऑब्जेक्ट के रूप में ES6 मॉड्यूल में डालना और इसे निर्यात करना है। इस तरह से आप इसे वहीं आयात कर सकते हैं, जहाँ आपको इसकी आवश्यकता है।

यह भी ध्यान देने योग्य है कि यदि आप वेबपैक का उपयोग कर रहे हैं, तो JSON फ़ाइलों का आयात डिफ़ॉल्ट रूप से काम करेगा (क्योंकि webpack >= v2.0.0 )।

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

यदि आप नोड का उपयोग कर रहे हैं तो आप कर सकते हैं:

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'




ecmascript-6