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

Question

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

import config from '../config.json'

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

Comments

इसका ES6 से कोई लेना-देना नहीं है लेकिन आप जो मॉड्यूल लोडर का उपयोग कर रहे हैं। सिंटैक्स ही ठीक है।

— फेलिक्स क्लिंग

ऐसा करने का सबसे साफ तरीका उपयोग webpackऔर इसके json-loaderसाथ है।

— सुप्रीत शंकर

निम्नलिखित सिंटैक्स के साथ आयात करने वाले JSON का ES6 समर्थन करता है: * './example.json' से डेटा के रूप में * आयात करें;

— वियामली

Answer 1

एक सरल उपाय:

config.js

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

फिर...

import config from '../config.js'

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

Comments

यह वास्तव में सवाल का जवाब नहीं देता है। आप केवल उदाहरण के लिए अपने package.json को package.js में नहीं बदल सकते। कई बार जब आप जेएसएन को जेएस नहीं आयात करना चाहते हैं।

— १ious बजे

समाधान बिल्कुल नहीं, आप एक जावास्क्रिप्ट वस्तु का निर्यात कर रहे हैं जो कि JSON के समान सिंटैक्स के साथ होती है।

— Ma Jerez

समस्या पाठ अद्यतन; आगे के शब्दार्थ बहस से बचने का प्रयास।

— गिल्बर्ट

मैंने "postbuild": "node myscript.js"अपने package.json फ़ाइल में एक चरण जोड़ा है जो मेरे लिए यह करने के लिए प्रतिस्थापित-इन-फ़ाइल का उपयोग करता है। myscript.js ­ const replace = require('replace-in-file'); const options = { files: '_demo/typedocs/navexReact.td.js', from: /{/, to: 'export default {', }; const convertJsonOutputToJsModule = async () => { try { const changes = await replace(options) console.log('Converted json to module in files:', changes.join(', ')); } catch (error) { console.error('Error occurred:', error); } } convertJsonOutputToJsModule()

— StJohn3D

"इसे जेएस में परिवर्तित करें" JSON फ़ाइल को आयात करने के लिए कोई समाधान नहीं है। अब JSON फ़ाइल नहीं है। यह JSON आयात करने के लिए # 1 Google परिणाम है, और मुख्य उत्तर JSON आयात नहीं करना है।

— जिम्बो जॉनी

Answer 2

टाइपस्क्रिप्ट में या बैबेल का उपयोग करके, आप अपने कोड में 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

Comments

बस इसे जोड़ने के लिए (टाइपस्क्रिप्ट जोंस इंपोर्ट) अब आप इसे बस अपने tsconfig में जोड़ सकते हैं ... {"compilerOptions": {"solutionJsonModule": true}}

— मैट

क्या कोई ब्राउज़र इसका समर्थन करता है? मैंने वर्तमान एफएफ पर यह कोशिश की और त्रुटि प्राप्त की Loading failed for the module with source "example.json"; Chrome पर मुझे "मॉड्यूल स्क्रिप्ट लोड करने में विफल: सर्वर ने" एप्लिकेशन / जसन "के एक गैर-जावास्क्रिप्ट MIME प्रकार के साथ प्रतिक्रिया दी। सख्त MIME प्रकार की जाँच प्रति HTML युक्ति मॉड्यूल मॉड्यूल के लिए लागू होती है।"

— कोडर

@ कोडर यह मेरे सभी ब्राउज़रों पर काम करता है। क्या आपके पास ES6 / ES2015 समर्थन सक्षम है?

— वियामली

यह सिर्फ मेरे लिए हुआ है, जब आप कहते हैं "ES6 में" आप वास्तव में "टीएस में मतलब है" - मैंने सोचा था कि आप द्वारा उत्सर्जित कोड के बारे में बात कर रहे थे, tscलेकिन वास्तव में ऐसा नहीं हो रहा है। मैं मूल रूप से ब्राउज़र पर ईएस 6 मॉड्यूल को चलाने की कोशिश कर रहा हूं ( <script type="module">) और ऊपर की त्रुटियां वही हैं जो आपको मिलती हैं अगर आप उस importलाइन को सीधे चलाते हैं। कृपया मुझे सही करें अगर मैं गलत हूं और आपने वास्तव में इसका मतलब है कि वास्तविक ES6 में JSON से आयात करना संभव है।

— कोडर

जब मैंने कहा कि "क्या कोई ब्राउज़र इसका समर्थन करता है, तो" मेरा मतलब यह नहीं था "के बाद आप इसे बेबल के माध्यम से ट्रांसपाइल करते हैं।" आपके द्वारा लिंक किया गया पहला लेख TS को importस्टेटमेंट को एक नोड में ट्रांसफ़िलिंग कर रहा है require()(इसे आज़माएं!), और दूसरा लिंक JSON आयात के बारे में कुछ नहीं कहता है। यहां समस्या पार्सर या मॉड्यूल सिस्टम के साथ नहीं है, यह लोडर है - ब्राउज़र का लोडर जावास्क्रिप्ट के अलावा किसी अन्य चीज के लिए एक आयात को हल नहीं करेगा। हुड के तहत, आपको हमेशा एक AJAX कॉल (fetch / XHR) का उपयोग करना होगा और परिणाम को पार्स करना होगा, भले ही आपका बिल्ड टूलचैन एब्सट्रैक्ट कि दूर हो।

— कोडर

Answer 3

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

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

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

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

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

Comments

स्ट्रिंग में इसे लगाने की कोई आवश्यकता नहीं है। इसे JSON कहा जाता है, JSSN को नहीं।

— एक बेहतर ओलिवर

इसके अलावा, Torazaburo ने पहले से हटाए गए उत्तर में समझाया: कोई ES6 "मॉड्यूल सिस्टम" नहीं है; एक एपीआई है जो एक विशेष लोडर द्वारा कार्यान्वित किया जाता है। JSON फ़ाइलों के आयात का समर्थन करने सहित कोई भी लोडर कुछ भी कर सकता है। उदाहरण के लिए, एक लोडर 'से आयात foo का समर्थन करने का चयन कर सकता है ।/directory निर्देशिका / index.js के लिए अर्थ के रूप में

— CodingIntrigue

वास्तव में ES6 / ES2015 आयात वाक्यविन्यास के माध्यम से JSON लोडिंग का समर्थन करते हैं: '* .example.json' से डेटा के रूप में * आयात करें;

— वियामाली

अनुस्मारक के लिए +1 जो वेबपैक स्वचालित रूप से करता है। हालाँकि, यदि आपके पास "परीक्षण: /.js/" है, तो वेबपैक आपकी json फाइल को जावास्क्रिप्ट के रूप में संकलित करने का प्रयास करेगा। #fail। इसे ठीक करने के लिए, इसे "परीक्षण: /.js$/" कहने के लिए बदलें

— रैप

वेबपैक नोडज पर आधारित है, है ना?

— अय्याश

Answer 4

मैं babel + Browserify का उपयोग कर रहा हूं और मेरे पास एक डायरेक्टरी में JSON फाइल है ।/i18n/locale-en.json ट्रांसलेशन नेमस्पेस (ngTranslate के साथ उपयोग करने के लिए)।

JSON फ़ाइल से कुछ भी निर्यात करने के बिना (जो btw संभव नहीं है), मैं अपनी सामग्री का एक डिफ़ॉल्ट आयात एक वाक्य विन्यास के साथ कर सकता है:

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

Answer 5

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

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'

Answer 6

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

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

उदाहरण के भीतर का उपयोग करें Next.js

Comments

टाइपस्क्रिप्ट के लिए जोड़ा गया नोट यह सुनिश्चित करने के लिए resolveJsonModuleहै trueकि आप में है tsconfig.json।

— पैट मिगलियाकियो

पूरी तरह से काम किया! जब जूस आयात करते हैं और इसे एक चर में संग्रहीत करते हैं, तो यह समाधान काम करता है।

— जेपी बाला कृष्णा

Answer 7

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

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

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

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

तो यहाँ है:

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

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

Comments

नहीं कर सकते। फ़ेच स्थानीय फ़ाइल का समर्थन नहीं करता है ... आप पॉलीफ़िल या कुछ का उपयोग कर सकते हैं।

— 18'18

@ थैरेपी देर से उत्तर देती है, लेकिन सर्वर के होस्टनाम को निर्दिष्ट किए बिना, साथ ही रिश्तेदार पथों से लोड करने के बिना भ्रूण एपीआई सबसे बिल्कुल पथ से लोडिंग का समर्थन करता है। आप जो सोच रहे हैं वह file:///यूआरएल से लोड हो रहा है , जो कि यहां नहीं हो रहा है।

— जेमी रिडिंग

Answer 8

लाने वाले ब्राउज़र में (मूल रूप से अब सभी):

फिलहाल, हम importJSON माइम प्रकार के साथ फाइल नहीं कर सकते , केवल जावास्क्रिप्ट माइम प्रकार वाली फाइलें। यह भविष्य में जोड़ा जाने वाला फीचर हो सकता है ( आधिकारिक चर्चा )।

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 सामग्री देखें।