Próbuję uruchomić kod ES6 w moim projekcie, ale pojawia się nieoczekiwany błąd eksportu tokena.
export class MyClass {
constructor() {
console.log("es6");
}
}
javascript
ecmascript-6
webpack
babel
Jason
źródło
źródło
export
jest dostępny tylko w ES6, a te moduły zapewniają obsługę ES6.module.exports = MyClass
, a nieexport class MyClass
Odpowiedzi:
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 (export
słowo kluczowe).Rozwiązanie:
babel
pakietu npm, aby przetransponować swój ES6 docommonjs
celulub
Przykłady składni CommonJS to (z flaviocopes.com/commonjs/ ):
exports.uppercase = str => str.toUpperCase()
exports.a = 1
źródło
import
natywnie? Myślałem, że wersja 10.0.0 będzie go mieć, ale najwyraźniej nie.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:
Po dołączeniu takiego skryptu:
Otrzymasz błąd:
Musisz dołączyć plik z atrybutem typu ustawionym na „moduł”:
A potem będzie działać zgodnie z oczekiwaniami i możesz zaimportować moduł do innego modułu:
źródło
type
oczekuje się, że będzie to prawidłowy typ MIME (zwany także typem nośnika), więc było to nieoczekiwane odkrycie. Dzięki!<script type="module">import ...</script>
podczas importowania z modułu. Testowałem to w najnowszej wersji Chromium.Moje dwa centy
Eksport
ES6
Alternatywa CommonJS
Eksportuj domyślnie
ES6
Alternatywa CommonJS
Mam nadzieję że to pomoże
źródło
Aby użyć ES6 dodaj
babel-preset-env
i w
.babelrc
:Odpowiedz zaktualizowano dzięki komentarzowi @ghanbari, aby zastosować babel 7.
źródło
babel
przez autora. Chociaż odpowiedź Phila Rickettsa wyjaśnia problem, co jest dobre, ta odpowiedź jest bezpośrednim rozwiązaniem problemu autora.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
app.js
źródło
Instaluje pakiety Babel
@babel/core
i@babel/preset
który przekształci ES6 do commonjs cel jako js węzłów nie rozumie bezpośrednio cele ES6npm install --save-dev @babel/core @babel/preset-env
Następnie musisz utworzyć jeden plik konfiguracyjny z nazwą
.babelrc
w katalogu głównym projektu i dodać tam ten kod{ "presets": ["@babel/preset-env"] }
źródło
Naprawiłem to, tworząc plik punktu wejścia, taki jak.
i każdy plik, który zaimportowałem do środka
app.js
i poza nim, działałimports/exports
teraz tak, jakbyś go uruchomiłnode index.js
Uwaga: jeśli
app.js
używaexport default
, staje się torequire('./app.js').default
podczas korzystania z pliku punktu wejścia.źródło
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.
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.
Mam nadzieję, że to działa ... :)
źródło