ES2015 आयात फ़ायरफ़ॉक्स में भी (शीर्ष स्तर पर भी) काम नहीं करता है

Question 1

ये मेरी नमूना फाइलें हैं:

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js:

import Test from 't2.js';

t2.js:

export const Test = console.log("Hello world");

जब मैं फ़ायरफ़ॉक्स 46 में पेज को लोड करता हूं, तो यह "सिंटैक्सएर्रर: आयात घोषणाएं केवल एक मॉड्यूल के शीर्ष स्तर पर दिखाई दे सकती हैं" - लेकिन मुझे यकीन नहीं है कि आयात स्टेटमेंट यहां कितना अधिक शीर्ष-स्तर प्राप्त कर सकता है। क्या यह त्रुटि एक लाल हेरिंग है, और क्या आयात / निर्यात अभी तक समर्थित नहीं है?

Question 2

वास्तव में आपको मिली त्रुटि इसलिए थी क्योंकि आपको स्पष्ट रूप से यह बताना होगा कि आप एक मॉड्यूल लोड कर रहे हैं - केवल तब मॉड्यूल के उपयोग की अनुमति है:

<script src="t1.js" type="module"></script>

मुझे यह इस दस्तावेज़ में ब्राउज़र में ES6 आयात का उपयोग करने के बारे में मिला । अनुशंसित पाठ।

पूरी तरह से उन ब्राउज़र संस्करणों में समर्थित है (और बाद में; caniuse.com पर पूरी सूची ):

फ़ायरफ़ॉक्स 60
क्रोम (डेस्कटॉप) 65
क्रोम (Android) 66
सफारी 1.1

पुराने ब्राउज़रों में आपको ब्राउज़र में कुछ झंडे सक्षम करने की आवश्यकता हो सकती है:

क्रोम कैनरी 60 - प्रयोगात्मक वेब प्लेटफ़ॉर्म फ्लैग के पीछे chrome:flags।
फ़ायरफ़ॉक्स 54 - में dom.moduleScripts.enabledसेटिंग about:config।
एज 15 - प्रायोगिक जावास्क्रिप्ट सुविधाओं के पीछे सेटिंग में about:flags।

Question 3

यह अब सटीक नहीं है। सभी वर्तमान ब्राउज़र अब ES6 मॉड्यूल का समर्थन करते हैं

नीचे मूल उत्तर

से importMDN पर :

यह सुविधा इस समय किसी भी ब्राउज़र में मूल रूप से लागू नहीं की गई है। यह कई ट्रांसपैरर्स में लागू किया जाता है, जैसे ट्रेसुर कंपाइलर, बैबेल या रोलअप।

ब्राउज़र समर्थन नहीं करते हैं import।

यहाँ ब्राउज़र समर्थन तालिका है:

यदि आप ईएस 6 मॉड्यूल आयात करना चाहते हैं, तो मैं एक ट्रांसपिलर (उदाहरण के लिए, बेबल ) का उपयोग करने का सुझाव दूंगा ।

Question 4

फ़ाइलें आयात करते समय बस .js फ़ाइल एक्सटेंशन का उपयोग करके उसी समस्या को हल करें ( type="moduleस्क्रिप्ट टैग में सेट करना न भूलें )।

बस लिखें:

import foo from 'foo.js';

के बजाय

import foo from 'foo';

Question 5

type=moduleमॉड्यूल को आयात और निर्यात करने वाली स्क्रिप्ट पर जोड़ें , इस समस्या को हल करेगा।

Question 6

आपको यह निर्दिष्ट करना होगा कि यह स्क्रिप्ट में टाइप है और निर्यात को डिफ़ॉल्ट होना चाहिए .. आपके मामले में यह होना चाहिए,

<script src='t1.js' type='module'>

इस तरह से निर्यात के बाद t2.js के लिए डिफ़ॉल्ट का उपयोग करें, निर्यात डिफ़ॉल्ट 'यहाँ आपकी अभिव्यक्ति जाती है' (आप यहाँ चर का उपयोग नहीं कर सकते हैं) । आप इस तरह फ़ंक्शन का उपयोग कर सकते हैं,

export default function print(){ return console.log('hello world');}

और आयात के लिए, आपका आयात सिंटैक्स इस तरह होना चाहिए, './t2.js' (आयात फ़ाइल एक्सटेंशन और / एक ही निर्देशिका के लिए) से प्रिंट आयात करें। मुझे उम्मीद है कि यह आपके लिए उपयोगी होगा!

Question 7

बहस के लिए...

कोई वैश्विक विंडो ऑब्जेक्ट में एक कस्टम मॉड्यूल इंटरफ़ेस जोड़ सकता है। हालांकि, यह अनुशंसित नहीं है। दूसरी ओर, DOM पहले से ही टूटा हुआ है और कुछ भी नहीं बना रहता है। मैं सभी समय का उपयोग गतिशील मॉड्यूल लोड करने और कस्टम श्रोताओं की सदस्यता लेने के लिए करता हूं। यह शायद एक जवाब नहीं है- लेकिन यह काम करता है। स्टैक ओवरफ्लो में अब एक मॉड्यूल.एक्सपोर्ट है जो 'स्पॉर्क' नामक एक घटना को कॉल करता है - ताज़ा होने तक ...

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window