Uzyskiwanie nieoczekiwanego eksportu tokenu

Próbuję uruchomić kod ES6 w moim projekcie, ale pojawia się nieoczekiwany błąd eksportu tokena.

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

Używasz składni modułu ES6.

Oznacza to, że twoje środowisko (np. Node.js) musi obsługiwać składnię modułu ES6.

NodeJS używa składni modułu CommonJS ( module.exports), a nie składni modułu ES6 ( exportsłowo kluczowe).

Rozwiązanie:

• Użyj babelpakietu npm, aby przetransponować swój ES6 do commonjscelu

lub

• Refaktoryzuj ze składnią CommonJS.

Przykłady składni CommonJS to (z flaviocopes.com/commonjs/ ):

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

W przypadku pojawienia się tego błędu może to być również związane ze sposobem włączenia pliku javascript do strony HTML. Podczas ładowania modułów musisz jawnie zadeklarować te pliki jako takie. Oto przykład:

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

var bar = "bar";

export { foo, bar };

Po dołączeniu takiego skryptu:

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

Otrzymasz błąd:

Uncaught SyntaxError: Nieoczekiwany eksport tokena

Musisz dołączyć plik z atrybutem typu ustawionym na „moduł”:

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

A potem będzie działać zgodnie z oczekiwaniami i możesz zaimportować moduł do innego modułu:

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

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

Moje dwa centy

Eksport

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

Alternatywa CommonJS

myClass.js

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

other.js

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

Eksportuj domyślnie

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

Alternatywa CommonJS

myClass.js

module.exports = class MyClass1 {
}

other.js

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

Mam nadzieję że to pomoże

Aby użyć ES6 dodaj babel-preset-env

i w .babelrc:

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

Odpowiedz zaktualizowano dzięki komentarzowi @ghanbari, aby zastosować babel 7.

W tej chwili nie ma potrzeby korzystania z Babel (JS stał się bardzo wydajny), gdy można po prostu użyć domyślnego eksportu modułu JavaScript. Sprawdź pełny samouczek

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World

Instaluje pakiety Babel @babel/corei @babel/presetktóry przekształci ES6 do commonjs cel jako js węzłów nie rozumie bezpośrednio cele ES6

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

Następnie musisz utworzyć jeden plik konfiguracyjny z nazwą .babelrcw katalogu głównym projektu i dodać tam ten kod

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

Naprawiłem to, tworząc plik punktu wejścia, taki jak.

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

i każdy plik, który zaimportowałem do środka app.jsi poza nim, działał imports/exports teraz tak, jakbyś go uruchomiłnode index.js

Uwaga: jeśli app.jsużywa export default, staje się to require('./app.js').defaultpodczas korzystania z pliku punktu wejścia.

Korzystanie ze składni ES6 nie działa w węźle, niestety trzeba mieć babel, aby kompilator zrozumiał składnię, taką jak eksport lub import.

npm install babel-cli --save

Teraz musimy utworzyć plik .babelrc, w pliku babelrc ustawimy babel na użycie ustawienia wstępnego es2015, które zainstalowaliśmy jako jego ustawienie wstępne podczas kompilacji do ES5.

W katalogu głównym naszej aplikacji utworzymy plik .babelrc. Npm instaluj babel-preset-es2015 - zapisz

W katalogu głównym naszej aplikacji utworzymy plik .babelrc.

{  "presets": ["es2015"] }

Mam nadzieję, że to działa ... :)