ब्राउज़र में ES6 मॉड्यूल्स: अनकनेक्टेड सिंटैक्स्योर: अनपेक्षित टोकन आयात

85

मैं ES6 (ECMAScript 6) के लिए नया हूं , और मैं ब्राउज़र में इसके मॉड्यूल सिस्टम का उपयोग करना चाहता हूं । मैंने पढ़ा है कि ES6 फ़ायरफ़ॉक्स और क्रोम द्वारा समर्थित है, लेकिन मैं निम्नलिखित त्रुटि का उपयोग कर रहा हूंexport

Uncaught SyntaxError: Unexpected token import

मेरे पास एक test.html फ़ाइल है

<html>
    <script src="test.js"></script>
<body>
</body>
</html>

और एक test.js फ़ाइल

'use strict';

class Test {

    static hello() {
        console.log("hello world");
    } 
}

export Test;

क्यों?

— cdarwin
स्रोत

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

— बरगी १

3

मुझे अभी भी एक स्क्रिप्ट और एक मॉड्यूल के बीच का अंतर समझ में नहीं आता है

— cdarwin

यहां

— बरगी

20

मेरे द्वारा देखा गया महत्वपूर्ण हिस्सा <script type="module"></script>यह सुनिश्चित करना है कि आप इसे जोड़ते हैं अन्यथा आपको वह त्रुटि मिल जाएगी। मैं दीवार पर लगातार अपना सिर पीट रहा था, <script>import ... </script>यह जानकर कि क्रोम अब झंडे के बिना ES6 मॉड्यूल का समर्थन करने के लिए कहा जाता है, तो मैंने देखा कि ब्राउज़र को निर्दिष्ट करने के लिए टाइप विशेषता की आवश्यकता थी कि यह ES6 मॉड्यूल है, जिसके बिना आपको सटीक मिलता है त्रुटि।

— इमैनुएल महुनी सेप

1

मैं Chrome 68 का उपयोग कर रहा हूं, मैं अभी भी इस त्रुटि को देखता हूं जब हम आयात करते हैं * से

— एकीकरण

66

कई आधुनिक ब्राउज़र अब ES6 मॉड्यूल का समर्थन करते हैं। जब तक आप अपनी स्क्रिप्ट को आयात करते हैं (प्रविष्टि से लेकर आपके एप्लिकेशन तक) <script type="module" src="...">इसका उपयोग करके काम करेगा।

अधिक जानकारी के लिए caniuse.com पर नज़र डालें : https://caniuse.com/#feat=es6-module

— vullnetyy
स्रोत

53

आप Google Chrome बीटा (61) / क्रोम कैनरी में ES6 मॉड्यूल आज़मा सकते हैं।

पॉल आयरिश द्वारा ToDo MVC का संदर्भ कार्यान्वयन - https://paulirish.github.io/es-modules-todomvc/

मैंने मूल डेमो -

//app.js
import {sum} from './calc.js'

console.log(sum(2,3));

//calc.js
let sum = (a,b) => { return a + b; }

export {sum};

<html> 
    <head>
        <meta charset="utf-8" />
    </head>

    <body>
        <h1>ES6</h1>
        <script src="app.js" type="module"></script>
    </body>

</html>

आशा करता हूँ की ये काम करेगा!

— रूपेश रेड्डी
स्रोत

33

यह सही है ... मुझे जो महत्वपूर्ण नोटिस आया है, वह <script type="module"></script>सुनिश्चित करें कि आप इसे जोड़ते हैं अन्यथा आपको वह त्रुटि मिल जाएगी। मैं दीवार पर लगातार अपना सिर पीट रहा था, <script>import ... </script>यह जानते हुए कि क्रोम अब झंडे के बिना ES6 मॉड्यूल का समर्थन करने के लिए कहा जाता है, तो मैंने देखा कि ब्राउज़र को निर्दिष्ट करने के लिए टाइप विशेषता की आवश्यकता थी कि यह ES6 मॉड्यूल है।

— इमैनुएल महुनी

1

{"संदेश": " बिना पढ़ा हुआ वाक्य रचना : अनपेक्षित टोकन {", "फ़ाइल नाम": " stacksnippets.net/js ", " लिनेनो ": 24, "कोलनो": 8}

— howw

4

मुझे आपके कोड स्निपेट को चलाने में त्रुटि हुई, क्रोम v67 का उपयोग करें, क्यों?

— होउग्व

@hoogw Stackoverflow ने कहा कि स्वचालित रूप से रन कोड स्निपेट जोड़ें। इस कोड को निष्पादित नहीं किया जा सकता है। आपको कोड को index.html पर कॉपी करना होगा और ऊपर दिखाए गए अनुसार .js फ़ाइलों को अलग करना होगा और ब्राउज़र में प्रयास करना होगा!

— रूपेश रेड्डी

उपयोगी उत्तर धन्यवाद। मैंने आपके लिए स्निपेट रनर निकाला। (जैसा कि मैंने देखा StackOverflow स्निपेट्स के पास एक से अधिक jsस्रोत नहीं हो सकते हैं )।

— मीर-इस्माइली

25

दुर्भाग्य से, मॉड्यूल अभी कई ब्राउज़रों द्वारा समर्थित नहीं हैं।

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

एमडीएन पर मिला

— t3h2mas
स्रोत

मैंने पढ़ा कि यह सुविधा एक प्रश्न में कार्यान्वित की गई थी, लेकिन TheMDN स्रोत वास्तव में अधिक विश्वसनीय है।

— cdarwin

निम्न लिंक के अनुसार Chrome 61 को आयात का समर्थन करना चाहिए - यह नहीं है। medium.com/dev-channel/…

— मार्क

4

आपको अपने स्क्रिप्ट टैग में टाइप = "मॉड्यूल" जोड़ना होगा।

— धुआंधार

10

यह मेरे लिए स्क्रिप्ट जोड़ने केtype="module" लिए importमेरे mjs आईएनजी काम:

<script type="module">
import * as module from 'https://rawgit.com/abernier/7ce9df53ac9ec00419634ca3f9e3f772/raw/eec68248454e1343e111f464e666afd722a65fe2/mymod.mjs'

console.log(module.default()) // Prints: Hi from the default export!
</script>

डेमो देखें: https://codepen.io/abernier/pen/wExQaa

— abernier
स्रोत