Unerwarteten Token-Export erhalten

Ich versuche, ES6-Code in meinem Projekt auszuführen, erhalte jedoch einen unerwarteten Fehler beim Token-Export.

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

Sie verwenden die ES6-Modulsyntax.

Dies bedeutet, dass Ihre Umgebung (z. B. node.js) die Syntax des ES6-Moduls unterstützen muss.

NodeJS verwendet die CommonJS-Modulsyntax ( module.exports) und nicht die ES6- Modulsyntax ( exportSchlüsselwort).

Lösung:

• Verwenden Sie das babelnpm-Paket, um Ihren ES6 auf ein commonjsZiel zu übertragen

oder

• Refactor mit CommonJS-Syntax.

Beispiele für die CommonJS-Syntax sind (von flaviocopes.com/commonjs/ ):

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

Falls Sie diesen Fehler erhalten, hängt dies möglicherweise auch damit zusammen, wie Sie die Javascript-Datei in Ihre HTML-Seite aufgenommen haben. Beim Laden von Modulen müssen Sie diese Dateien explizit als solche deklarieren. Hier ein Beispiel:

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

var bar = "bar";

export { foo, bar };

Wenn Sie das Skript wie folgt einfügen:

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

Sie erhalten den Fehler:

Nicht erfasster SyntaxError: Unerwarteter Token-Export

Sie müssen die Datei mit einem auf "Modul" gesetzten Typattribut einschließen:

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

Und dann funktioniert es wie erwartet und Sie können Ihr Modul in ein anderes Modul importieren:

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

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

Meine zwei Cent

Export

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');

Standard exportieren

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');

Hoffe das hilft

Um ES6 zu verwenden, fügen Sie hinzu babel-preset-env

und in deinem .babelrc:

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

Antwort aktualisiert dank @ghanbari Kommentar, um babel 7 anzuwenden.

Babel muss derzeit nicht verwendet werden (JS ist sehr leistungsfähig geworden), wenn Sie einfach die Standard-JavaScript-Modulexporte verwenden können. Überprüfen Sie das vollständige Tutorial

Message.js

module.exports = 'Hello world';

app.js.

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

console.log(msg); // Hello World

Installieren Sie die babel - Pakete @babel/coreund @babel/presetdie konvertiert ES6 zu einem Commonjs Ziel als Knoten js nicht versteht ES6 Ziele direkt

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

Anschließend müssen Sie eine Konfigurationsdatei mit dem Namen .babelrcim Stammverzeichnis Ihres Projekts erstellen und diesen Code dort hinzufügen

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

Ich habe dies behoben, indem ich eine Einstiegspunktdatei wie erstellt habe.

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

und jede Datei, die ich innerhalb app.jsund außerhalb importiert habe, hat imports/exports jetzt funktioniert. Sie führen sie einfach so ausnode index.js

Hinweis: Wenn app.jsverwendet export default, wird dies require('./app.js').defaultbei Verwendung der Einstiegspunktdatei.

Die Verwendung der ES6-Syntax funktioniert im Knoten nicht. Leider muss babel anscheinend vorhanden sein, damit der Compiler die Syntax wie Export oder Import versteht.

npm install babel-cli --save

Jetzt müssen wir eine .babelrc-Datei erstellen. In der babelrc-Datei setzen wir babel so, dass beim Kompilieren auf ES5 die Voreinstellung es2015 verwendet wird, die wir als Voreinstellung installiert haben.

Im Stammverzeichnis unserer App erstellen wir eine .babelrc-Datei. $ npm install babel-preset-es2015 --save

Im Stammverzeichnis unserer App erstellen wir eine .babelrc-Datei.

{  "presets": ["es2015"] }

Hoffe, es funktioniert ... :)