รับโทเค็นการส่งออกที่ไม่คาดคิด

ฉันพยายามเรียกใช้รหัส ES6 ในโครงการของฉัน แต่ฉันได้รับข้อผิดพลาดในการส่งออกโทเค็นที่ไม่คาดคิด

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

คุณกำลังใช้ไวยากรณ์โมดูล ES6

นี่หมายความว่าสภาพแวดล้อมของคุณ (เช่น node.js) ต้องรองรับไวยากรณ์ของโมดูล ES6

NodeJS ใช้ไวยากรณ์ CommonJS Module ( module.exports) ไม่ใช่ไวยากรณ์โมดูล ES6 (exportคำหลัก)

สารละลาย:

• ใช้ babelแพ็คเกจ npm เพื่อโอน ES6 ของคุณไปยังcommonjsเป้าหมาย

หรือ

• Refactor ด้วยไวยากรณ์ CommonJS

ตัวอย่างของไวยากรณ์ CommonJS คือ (จากflaviocopes.com/commonjs/ ):

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

ในกรณีที่คุณได้รับข้อผิดพลาดนี้อาจเกี่ยวข้องกับวิธีที่คุณรวมไฟล์ javascript ไว้ในหน้า html ของคุณ เมื่อโหลดโมดูลคุณต้องประกาศไฟล์เหล่านั้นอย่างชัดเจน นี่คือตัวอย่าง:

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

var bar = "bar";

export { foo, bar };

เมื่อคุณรวมสคริปต์เช่นนี้:

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

คุณจะได้รับข้อผิดพลาด:

Uncaught SyntaxError: การส่งออกโทเค็นที่ไม่คาดคิด

คุณต้องรวมไฟล์ด้วยแอตทริบิวต์ type ที่ตั้งค่าเป็น "module":

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

จากนั้นจะทำงานตามที่คาดไว้และคุณพร้อมที่จะนำเข้าโมดูลของคุณในโมดูลอื่น:

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

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

สองเซ็นต์ของฉัน

ส่งออก

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

CommonJS Alternative

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 Alternative

myClass.js

module.exports = class MyClass1 {
}

other.js

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

หวังว่านี่จะช่วยได้

เพื่อใช้เพิ่ม ES6 babel-preset-env

และใน.babelrc:

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

ตอบกลับการอัปเดตด้วยความคิดเห็น @ghanbari เพื่อใช้ babel 7

ไม่จำเป็นต้องใช้ Babel ในขณะนี้ (JS มีประสิทธิภาพมาก) เมื่อคุณสามารถใช้การส่งออกโมดูล JavaScript เริ่มต้นได้ ตรวจสอบการสอนเต็มรูปแบบ

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World

ติดตั้งแพคเกจ babel @babel/coreและ@babel/presetจะแปลง ES6 ไปยังเป้าหมาย commonjs เนื่องจากโหนด js ไม่เข้าใจเป้าหมาย ES6 โดยตรง

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

จากนั้นคุณต้องสร้างไฟล์กำหนดค่าหนึ่งไฟล์ที่มีชื่อ.babelrcในไดเรกทอรีรากของโครงการและเพิ่มรหัสนี้ที่นั่น

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

ฉันแก้ไขสิ่งนี้โดยทำไฟล์จุดเข้าใช้งานเช่น

// 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เมื่อใช้ไฟล์ entry point

การใช้ไวยากรณ์ ES6 ไม่ทำงานในโหนดโชคไม่ดีที่คุณต้องมี Babel เพื่อทำให้คอมไพเลอร์เข้าใจไวยากรณ์เช่นการส่งออกหรือนำเข้า

npm install babel-cli --save

ตอนนี้เราจำเป็นต้องสร้างไฟล์ .abelrc ในไฟล์ babelrc เราจะตั้งค่า babel ให้ใช้ preset es2015 ที่เราติดตั้งเป็น preset เมื่อทำการคอมไพล์เป็น ES5

ที่รากของแอพของเราเราจะสร้างไฟล์ .abelrc $ npm ติดตั้ง babel-preset-es2015 - บันทึก

ที่รากของแอพของเราเราจะสร้างไฟล์ .abelrc

{  "presets": ["es2015"] }

หวังว่ามันจะทำงาน ... :)