Ottenere l'esportazione token imprevista

Sto cercando di eseguire un po 'di codice ES6 nel mio progetto ma sto ricevendo un errore di esportazione di token imprevisto.

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

Si sta utilizzando la sintassi del modulo ES6.

Ciò significa che l'ambiente (ad esempio node.js) deve supportare la sintassi del modulo ES6.

NodeJS utilizza la sintassi del modulo CommonJS ( module.exports) e non la sintassi del modulo ES6 ( exportparola chiave).

Soluzione:

• Usa il babelpacchetto npm per compilare il tuo ES6 su un commonjstarget

o

• Refactor con sintassi CommonJS.

Esempi di sintassi CommonJS sono (da flaviocopes.com/commonjs/ ):

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

Nel caso in cui venga visualizzato questo errore, potrebbe anche essere correlato al modo in cui hai incluso il file javascript nella tua pagina html. Quando si caricano i moduli, è necessario dichiarare esplicitamente tali file come tali. Ecco un esempio:

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

var bar = "bar";

export { foo, bar };

Quando includi lo script in questo modo:

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

Riceverai l'errore:

Uncaught SyntaxError: esportazione token imprevista

Devi includere il file con un attributo type impostato su "module":

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

Quindi funzionerà come previsto e sei pronto per importare il tuo modulo in un altro modulo:

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

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

I miei due centesimi

Esportare

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

Alternativa CommonJS

myClass.js

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

other.js

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

Esporta predefinito

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

Alternativa CommonJS

myClass.js

module.exports = class MyClass1 {
}

other.js

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

Spero che questo ti aiuti

Per usare ES6 aggiungi babel-preset-env

e nel tuo .babelrc:

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

Risposta aggiornata grazie al commento di @ghanbari per applicare babel 7.

Non è necessario utilizzare Babel in questo momento (JS è diventato molto potente) quando puoi semplicemente usare le esportazioni del modulo JavaScript predefinito. Controlla il tutorial completo

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World

Installa i pacchetti babel @babel/coree @babel/presetquesto convertirà ES6 in un target commonjs poiché il nodo js non comprende direttamente i target ES6

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

Quindi è necessario creare un file di configurazione con nome .babelrcnella directory principale del progetto e aggiungere questo codice lì

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

Ho risolto questo problema creando un file del punto di ingresso simile.

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

e qualsiasi file che ho importato dentro app.jse fuori con cui imports/exports hai lavorato ora lo esegui comenode index.js

Nota: se app.jsutilizzato export default, questo diventa require('./app.js').defaultquando si utilizza il file del punto di ingresso.

L'uso della sintassi ES6 non funziona nel nodo, sfortunatamente, devi avere babel apparentemente per far capire al compilatore la sintassi come export o import.

npm install babel-cli --save

Ora dobbiamo creare un file .babelrc, nel file babelrc, imposteremo babel per usare il predefinito es2015 che abbiamo installato come predefinito durante la compilazione su ES5.

Alla radice della nostra app, creeremo un file .babelrc. $ npm installa babel-preset-es2015 --save

Alla radice della nostra app, creeremo un file .babelrc.

{  "presets": ["es2015"] }

Spero funzioni ... :)