Ik probeer wat ES6-code in mijn project uit te voeren, maar ik krijg een onverwachte tokenexportfout.
export class MyClass {
constructor() {
console.log("es6");
}
}
Antwoord 1, autoriteit 100%
U gebruikt de syntaxis van de ES6-module.
Dit betekent dat uw omgeving (bijv. node.js) de syntaxis van de ES6-module moet ondersteunen.
NodeJS gebruikt de syntaxis van de CommonJS-module (module.exports) niet de syntaxis van de ES6-module (exporttrefwoord).
Oplossing:
- Gebruik
babelnpm-pakket om uw ES6 te transpileren naar eencommonjs-doel
of
- Refactor met CommonJS-syntaxis.
Voorbeelden van CommonJS-syntaxis zijn (van flaviocopes.com/commonjs/):
exports.uppercase = str => str.toUpperCase()exports.a = 1
Antwoord 2, autoriteit 66%
Als u deze foutmelding krijgt, kan dit ook te maken hebben met hoe u het JavaScript-bestand in uw html-pagina heeft opgenomen. Bij het laden van modules moet u die bestanden expliciet als zodanig declareren. Hier is een voorbeeld:
//module.js:
function foo(){
return "foo";
}
var bar = "bar";
export { foo, bar };
Als je het script als volgt opneemt:
<script src="module.js"></script>
Je krijgt de foutmelding:
Uncaught SyntaxError: Onverwachte tokenexport
U moet het bestand opnemen met een typekenmerk dat is ingesteld op “module”:
<script type="module" src="module.js"></script>
Dan moet het werken zoals verwacht en u bent klaar om uw module in een andere module te importeren:
import { foo, bar } from "./module.js";
console.log( foo() );
console.log( bar );
3, Autoriteit 18%
Mijn twee centen
Export
ES6
myClass.js
export class MyClass1 {
}
export class MyClass2 {
}
andere.js
import { MyClass1, MyClass2 } from './myClass';
Gemengs alternatief
myClass.js
class MyClass1 {
}
class MyClass2 {
}
module.exports = { MyClass1, MyClass2 }
// or
// exports = { MyClass1, MyClass2 };
andere.js
const { MyClass1, MyClass2 } = require('./myClass');
Uitvoer Standaard
ES6
MyClass.js
export default class MyClass {
}
andere.js
import MyClass from './myClass';
Gemengs alternatief
myClass.js
module.exports = class MyClass1 {
}
other.js
const MyClass = require('./myClass');
Hopelijk helpt dit
Antwoord 4, autoriteit 4%
Ik heb dit opgelost door een ingangspuntbestand te maken zoals.
// index.js
require = require('esm')(module)
module.exports = require('./app.js')
en elk bestand dat ik in app.jsen daarbuiten heb geïmporteerd, werkte met imports/exports
nu voer je het gewoon uit zoals node index.js
Opmerking: als app.jsexport defaultgebruikt, wordt dit require('./app.js').defaultbij gebruik het ingangspuntbestand.
Antwoord 5, autoriteit 3%
Om ES6 te gebruiken, voeg babel-preset-env
. toe
en in uw .babelrc:
{
"presets": ["@babel/preset-env"]
}
Antwoord bijgewerkt dankzij @ghanbari-commentaar om babel 7 toe te passen.
Antwoord 6, autoriteit 3%
Het is op dit moment niet nodig om Babel te gebruiken (JS is erg krachtig geworden) wanneer je gewoon de standaard export van JavaScript-modules kunt gebruiken. Bekijk de volledige tutorial
Message.js
module.exports = 'Hello world';
app.js
var msg = require('./Messages.js');
console.log(msg); // Hello World
7
Ik heb de onverwachte token export fout ook toen ik probeerde een lokale JavaScript-module in mijn project te importeren. Ik heb het opgelost door een type als een module te declareren bij het toevoegen van een script-tag in mijn index.html-bestand.
<script src = "./path/to/the/module/" type = "module"></script>
8
Ik wil eigenlijk een eenvoudige oplossing toevoegen. Gebruik consten backticks (`).
const model = `<script type="module" src="/"></<script>`
9
Het gebruik van de ESS6-syntaxis werkt niet in het knooppunt, helaas moet je blijkbaar blijkbaar hebben om de compiler te laten syntaxis begrijpen, zoals export of import.
npm install babel-cli --save
Nu moeten we een .babelrc-bestand maken, in het BabelRC-bestand, we zullen Babel instellen om de PRESET van ES2015 te gebruiken die we als preset hebben geïnstalleerd bij het compileren van ES5.
Aan de root van onze app maken we een .babelrc-bestand.
$ NPM Installeer Babel-Preset-ES2015 –Save
Aan de root van onze app maken we een .babelrc-bestand.
{ "presets": ["es2015"] }
Ik hoop dat het werkt … 🙂