Mendapatkan Ekspor Token yang Tidak Terduga

Saya mencoba menjalankan beberapa kode ES6 di proyek saya, tetapi saya mendapatkan kesalahan token ekspor yang tidak terduga.

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

Anda menggunakan sintaks Modul ES6.

Ini berarti lingkungan Anda (misalnya node.js) harus mendukung sintaks Modul ES6.

NodeJS menggunakan sintaks Modul CommonJS ( module.exports) bukan sintaks modul ES6 ( exportkata kunci).

Larutan:

• Gunakan babelpaket npm untuk mengubah ES6 Anda ke commonjstarget

atau

• Refactor dengan sintaks CommonJS.

Contoh dari sintaks CommonJS adalah (dari flaviocopes.com/commonjs/ ):

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

Jika Anda mendapatkan kesalahan ini, itu mungkin juga terkait dengan bagaimana Anda memasukkan file javascript ke halaman html Anda. Saat memuat modul, Anda harus mendeklarasikan file-file tersebut secara eksplisit. Berikut sebuah contoh:

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

var bar = "bar";

export { foo, bar };

Ketika Anda memasukkan skrip seperti ini:

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

Anda akan mendapatkan kesalahan:

Uncaught SyntaxError: Ekspor token yang tidak terduga

Anda harus memasukkan file dengan atribut type yang disetel ke "module":

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

Dan itu akan berfungsi seperti yang diharapkan dan Anda siap untuk mengimpor modul Anda di modul lain:

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

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

Dua sen saya

Ekspor

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

Alternatif CommonJS

myClass.js

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

other.js

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

Ekspor Default

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

Alternatif CommonJS

myClass.js

module.exports = class MyClass1 {
}

other.js

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

Semoga ini membantu

Untuk menggunakan ES6 add babel-preset-env

dan di Anda .babelrc:

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

Jawaban diperbarui berkat komentar @ghanbari untuk menerapkan babel 7.

Tidak perlu menggunakan Babel saat ini (JS menjadi sangat kuat) ketika Anda cukup menggunakan ekspor modul JavaScript default. Lihat tutorial lengkap

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World

Instal paket babel @babel/coredan @babel/presetyang akan mengubah ES6 menjadi target commonjs karena node js tidak memahami target ES6 secara langsung

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

Maka Anda perlu membuat satu file konfigurasi dengan nama .babelrcdi direktori root proyek Anda dan menambahkan kode ini di sana

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

Saya memperbaikinya dengan membuat file entry point seperti.

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

dan semua file yang saya impor di dalam app.jsdan di luar berfungsi dengan imports/exports sekarang Anda hanya menjalankannya sepertinode index.js

Catatan: jika app.jsdigunakan export default, ini menjadi require('./app.js').defaultsaat menggunakan file titik masuk.

Menggunakan sintaks ES6 tidak berfungsi dalam node, sayangnya, Anda harus memiliki babel untuk membuat kompiler memahami sintaksis seperti ekspor atau impor.

npm install babel-cli --save

Sekarang kita perlu membuat file .babelrc, dalam file babelrc, kita akan mengatur babel untuk menggunakan preset es2015 yang kita instal sebagai preset ketika dikompilasi ke ES5.

Di root aplikasi kami, kami akan membuat file .babelrc. $ npm install babel-preset-es2015 --save

Di root aplikasi kami, kami akan membuat file .babelrc.

{  "presets": ["es2015"] }

Semoga berhasil ... :)