अप्रत्याशित टोकन निर्यात प्राप्त करना

Question

मैं अपने प्रोजेक्ट में कुछ ES6 कोड चलाने की कोशिश कर रहा हूं, लेकिन मुझे एक अप्रत्याशित टोकन त्रुटि मिल रही है।

export class MyClass {
  constructor() {
    console.log("es6");
  }
}

Comments

किसी भी सहायता की पेशकश करने के लिए आपके पर्यावरण या कॉन्फ़िगरेशन के बारे में पर्याप्त जानकारी नहीं है। यह त्रुटि बता रही है कि या तो वेबपैक या बैबेल ठीक से काम नहीं कर रहे हैं, जैसा exportकि केवल ES6 में उपलब्ध है, और वे मॉड्यूल हैं जो ES6 सहायता प्रदान करते हैं।

— क्ले जूल

आप का उपयोग करना चाहिए module.exports = MyClass, नहींexport class MyClass

— onmyway133

Answer 1

आप ES6 मॉड्यूल सिंटैक्स का उपयोग कर रहे हैं।

इसका अर्थ है कि आपका वातावरण (उदा। नोड .js) ES6 मॉड्यूल सिंटैक्स का समर्थन करना चाहिए।

NodeJS राष्ट्रमंडल मॉड्यूल सिंटैक्स ( module.exports) नहीं ES6 मॉड्यूल सिंटैक्स ( exportकीवर्ड) का उपयोग करता है।

उपाय:

• babelअपने ES6 को commonjsलक्ष्य तक पहुंचाने के लिए npm पैकेज का उपयोग करें

या

• कॉमनजेएस सिंटैक्स के साथ रिफ्लेक्टर।

CommonJS सिंटैक्स के उदाहरण हैं ( flaviocopes.com/commonjs/ से ):

• exports.uppercase = str => str.toUpperCase()
• exports.a = 1

Comments

नेटजेस importमूल रूप से कब समर्थन करेगा ? मैंने सोचा कि v10.0.0 यह होगा, लेकिन जाहिरा तौर पर नहीं।

— चॉवी

@chovy प्रयोगात्मक समर्थन ध्वज "--experimental-मॉड्यूल" के साथ उपलब्ध है। फ़ाइलों को .mjs एक्सटेंशन

— Giovanni P.

मुझे मॉड्यूल के लिए मूल समर्थन के साथ Chrome 66 का उपयोग करके यह त्रुटि मिल रही है।

— टॉम रसेल

BTW: ध्यान दें कि जबकि ध्वज के पीछे नोड 10 / नोड 12 समर्थन मॉड्यूल हैं, वे इसे REPL मोड में समर्थन नहीं करते हैं - हालाँकि यह नोड 12 में eval मोड में समर्थित है ।

— याकूब।

किसी के लिए अभी भी कॉमनजेंस सिंटेक्स के बारे में स्पष्ट नहीं हैं। कृपया इस लिंक की जांच करें, थोड़ी मदद कर सकते हैं। flaviocopes.com/commonjs

— LT

Answer 2

यदि आपको यह त्रुटि मिलती है तो यह भी संबंधित हो सकता है कि आपने जावास्क्रिप्ट फ़ाइल को अपने html पेज में कैसे शामिल किया। मॉड्यूल लोड करते समय आपको उन फाइलों को स्पष्ट रूप से घोषित करना होगा। यहाँ एक उदाहरण है:

//module.js:
function foo(){
   return "foo";
}

var bar = "bar";

export { foo, bar };

जब आप स्क्रिप्ट को इस तरह शामिल करते हैं:

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

आपको त्रुटि मिलेगी:

बिना पढ़ा हुआ वाक्यविन्यास: अप्रत्याशित टोकन निर्यात

आपको फ़ाइल को "मॉड्यूल" पर सेट एक प्रकार की विशेषता के साथ शामिल करने की आवश्यकता है:

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

और फिर यह उम्मीद के मुताबिक काम करेगा और आप अपने मॉड्यूल को दूसरे मॉड्यूल में आयात करने के लिए तैयार हैं:

import { foo, bar } from  "./module.js";

console.log( foo() );
console.log( bar );

Comments

"सबसे अपवर्तित" उत्तर के विपरीत, यह वास्तव में समस्या को हल करता है और बताता है कि यह सुझाव के बिना क्यों हो रहा है कि एकमात्र विकल्प कॉमनज विधि, एपीएम विधि का लाभ उठाना है या हमारे कोड को ट्रांसपाइल करना है ... यह भी एक अपवाद होगा w3c मानक के लिए जहां typeवैध माइम प्रकार (उर्फ मीडिया प्रकार) होने की उम्मीद है, इसलिए यह एक अप्रत्याशित खोज थी। धन्यवाद!

— शॉन विल्सन

यह त्रुटि को ठीक करता है लेकिन मुझे Chrome 67 में आयात कथन की लाइन पर "अनपेक्षित टोकन {" मिलता है, जो कि इनलाइन वाली स्क्रिप्ट के साथ है उदाहरण के लिए <script> import ... </ script>

— PANDWood

@PandaWood आपको <script type="module">import ...</script>मॉड्यूल से आयात करते समय उपयोग करना होगा । मैंने क्रोमियम के हालिया संस्करण में इसका परीक्षण किया।

— व्लादिमीर एस।

इसने मेरा मुद्दा तय किया :)

— user3651476

शुद्ध जेएस (ईएस 6) ने आयात का समर्थन किया है और यह बताता है कि मुझे यह क्यों मिला

— एरिक

Answer 3

मेरे दो सेंट

निर्यात

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

import { MyClass1, MyClass2 } from './myClass';

CommonJS वैकल्पिक

myClass.js

class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };

other.js

const { MyClass1, MyClass2 } = require('./myClass');

डिफ़ॉल्ट निर्यात करें

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

CommonJS वैकल्पिक

myClass.js

module.exports = class MyClass1 {
}

other.js

const MyClass = require('./myClass');

उम्मीद है की यह मदद करेगा

Comments

ES6 डिफ़ॉल्ट निर्यात उदाहरण के लिए, आपने "डिफ़ॉल्ट निर्यात" लिखा था, लेकिन यह "निर्यात डिफ़ॉल्ट" होना चाहिए।

— IAM_AL_X

@IAM_AL_X पकड़ के लिए धन्यवाद :-)

— बार्नस्टोक

Answer 4

ईएस 6 ऐड का उपयोग करने के लिए babel-preset-env

और आपके में .babelrc:

{
  "presets": ["@babel/preset-env"]
}

उत्तर अपडेट किया गया धन्यवाद बघेल 7 लगाने के लिए @aganbari टिप्पणी के लिए।

Comments

बाबेल को समझाने के बारे में उनका सवाल नहीं। तो क्यों कुछ का उत्तर देने की आवश्यकता नहीं होनी चाहिए जो अन्य को भ्रमित कर सके?

— जलाल

@monsto इस सवाल को babelलेखक ने पहले ही टैग कर दिया था । जबकि फिल रिकेट्स का जवाब समस्या को स्पष्ट करता है, जो अच्छा है, यह उत्तर लेखक की समस्या का सीधा समाधान है।

— 15

"@ बेबल / प्रीसेट-एनव"

— घनबारी

Answer 5

इस समय बबेल का उपयोग करने की कोई आवश्यकता नहीं है (जेएस बहुत शक्तिशाली हो गया है) जब आप बस डिफ़ॉल्ट जावास्क्रिप्ट मॉड्यूल निर्यात का उपयोग कर सकते हैं। पूर्ण ट्यूटोरियल की जाँच करें

Message.js

module.exports = 'Hello world';

app.js

var msg = require('./Messages.js');

console.log(msg); // Hello World

Comments

वैसे आप एक वर्ग का निर्यात कैसे करेंगे?

— शेरविन अबलाना डापिटो

सवाल के रूप में मेरा जवाब हटा रहा था क्योंकि वास्तव में ES6 के लिए था और न कि NJJS द्वारा उपयोग किया जाने वाला कॉमनजस। कृपया उत्तर के लिए ऊपर की जाँच करें।

— एल्विन कोंडा

@ SherwinAblañaDapito मॉड्यूल.exports = class MyClass {} काम करता है

— Marian Klühspies

Answer 6

बाबेल संकुल को स्थापित करें @babel/coreऔर @babel/presetजो ES6 को एक सामान्य लक्ष्य के रूप में परिवर्तित करेगा क्योंकि नोड js को सीधे ES6 लक्ष्य समझ में नहीं आते हैं

npm install --save-dev @babel/core @babel/preset-env

फिर आपको .babelrcअपनी परियोजना की मूल निर्देशिका में नाम के साथ एक कॉन्फ़िगरेशन फ़ाइल बनाने और इस कोड को वहां जोड़ने की आवश्यकता है

{ "presets": ["@babel/preset-env"] }

Comments

मुझे @ बाबेल / रजिस्टर स्थापित करने की भी आवश्यकता थी, अन्यथा मुझे अभी भी "सिंटेक्सएरर: एक मॉड्यूल के बाहर आयात विवरण का उपयोग नहीं किया जा सकता"

— आणविक

Answer 7

मैंने प्रविष्टि बिंदु फ़ाइल जैसी बनाकर इसे ठीक किया।

// index.js
require = require('esm')(module)
module.exports = require('./app.js')

और मेरे द्वारा आयात की गई किसी भी फ़ाइल app.jsको imports/exports अभी आपके साथ काम किया गया है जैसे आप इसे चलाते हैंnode index.js

नोट: यदि app.jsउपयोग करता है export default, require('./app.js').defaultतो प्रवेश बिंदु फ़ाइल का उपयोग करते समय यह बन जाता है ।

Comments

सरल परियोजनाओं के लिए सबसे अच्छा जवाब बेबल, वेबपैक, पार्सल आदि की आवश्यकता नहीं है ... मैंने प्रोजेक्ट के लिए सरल / सर्वर एक्सप्रेस के साथ मोनोरेपो परियोजना में उपयोग किया। एक आकर्षण की तरह काम किया ...

— Mattdlockyer

Answer 8

ES6 सिंटैक्स का उपयोग नोड में काम नहीं करता है, दुर्भाग्य से, आपको कंपाइलर को निर्यात या आयात जैसे सिंटैक्स को समझने के लिए स्पष्ट रूप से बाबेल होना चाहिए।

npm install babel-cli --save

अब हमें एक .babelrc फ़ाइल बनाने की आवश्यकता है, babelrc फाइल में, हम ES5 का संकलन करते समय अपने प्रीसेट के रूप में स्थापित es2015 प्रीसेट का उपयोग करने के लिए बैबेल सेट करेंगे।

हमारे एप्लिकेशन की जड़ में, हम एक .babelrc फ़ाइल बनाएंगे। $ npm बाबेल-प्रीसेट-es2015 -save स्थापित करें

हमारे एप्लिकेशन की जड़ में, हम एक .babelrc फ़ाइल बनाएंगे।

{  "presets": ["es2015"] }

मुझे भरोसा है ये काम करेगा ... :)