Obtention d'une exportation de jeton inattendue

J'essaie d'exécuter du code ES6 dans mon projet mais j'obtiens une erreur d'exportation de jeton inattendue.

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

Vous utilisez la syntaxe du module ES6.

Cela signifie que votre environnement (par exemple node.js) doit prendre en charge la syntaxe du module ES6.

NodeJS utilise la syntaxe du module CommonJS ( module.exports) et non la syntaxe du module ES6 ( exportmot clé).

Solution:

• Utilisez le babelpackage npm pour transpiler votre ES6 vers une commonjscible

ou

• Refactor avec la syntaxe CommonJS.

Voici des exemples de syntaxe CommonJS (sur flaviocopes.com/commonjs/ ):

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

Dans le cas où vous obtenez cette erreur, cela peut également être lié à la façon dont vous avez inclus le fichier javascript dans votre page html. Lors du chargement des modules, vous devez déclarer explicitement ces fichiers comme tels. Voici un exemple:

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

var bar = "bar";

export { foo, bar };

Lorsque vous incluez le script comme ceci:

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

Vous obtiendrez l'erreur:

SyntaxError non capturée: exportation inattendue de jetons

Vous devez inclure le fichier avec un attribut de type défini sur "module":

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

Et puis cela fonctionnera comme prévu et vous êtes prêt à importer votre module dans un autre module:

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

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

Mes deux centimes

Exportation

ES6

myClass.js

export class MyClass1 {
}
export class MyClass2 {
}

other.js

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

Alternative à CommonJS

myClass.js

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

other.js

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

Exporter par défaut

ES6

myClass.js

export default class MyClass {
}

other.js

import MyClass from './myClass';

Alternative à CommonJS

myClass.js

module.exports = class MyClass1 {
}

other.js

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

J'espère que cela t'aides

Pour utiliser ES6, ajoutez babel-preset-env

et dans votre .babelrc:

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

Réponse mise à jour grâce au commentaire @ghanbari pour appliquer babel 7.

Il n'est pas nécessaire d'utiliser Babel pour le moment (JS est devenu très puissant) lorsque vous pouvez simplement utiliser les exportations de module JavaScript par défaut. Consultez le didacticiel complet

Message.js

module.exports = 'Hello world';

app.js

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

console.log(msg); // Hello World

Installez les packages babel @babel/coreet @babel/presetqui convertira ES6 en une cible commonjs car le nœud js ne comprend pas directement les cibles ES6

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

Ensuite, vous devez créer un fichier de configuration avec nom .babelrcdans le répertoire racine de votre projet et y ajouter ce code

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

J'ai corrigé cela en créant un fichier de point d'entrée comme.

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

et tout fichier que j'ai importé à l'intérieur app.jset au-delà a travaillé avec imports/exports maintenant vous l'exécutez commenode index.js

Remarque: en cas d' app.jsutilisation export default, cela devientrequire('./app.js').default lors de l'utilisation du fichier de point d'entrée.

L'utilisation de la syntaxe ES6 ne fonctionne pas dans le nœud, malheureusement, vous devez avoir babel apparemment pour que le compilateur comprenne la syntaxe telle que l'exportation ou l'importation.

npm install babel-cli --save

Maintenant, nous devons créer un fichier .babelrc, dans le fichier babelrc, nous allons configurer babel pour utiliser le préréglage es2015 que nous avons installé comme son préréglage lors de la compilation en ES5.

À la racine de notre application, nous allons créer un fichier .babelrc. $ npm install babel-preset-es2015 --save

À la racine de notre application, nous allons créer un fichier .babelrc.

{  "presets": ["es2015"] }

Esperons que ça marche ... :)