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");
}
}
module.exports = MyClass
, pasexport class MyClass
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");
}
}
module.exports = MyClass
, pasexport class MyClass
Réponses:
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 ( export
mot clé).
Solution:
babel
package npm pour transpiler votre ES6 vers une commonjs
cibleou
Voici des exemples de syntaxe CommonJS (sur flaviocopes.com/commonjs/ ):
exports.uppercase = str => str.toUpperCase()
exports.a = 1
import
nativement? Je pensais que la version 10.0.0 l'aurait mais apparemment pas.
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 );
type
devrait être un type MIME valide (aka. type de média), donc c'était une découverte inattendue. Merci!
<script type="module">import ...</script>
, lorsque vous importez à partir du module. Je l'ai testé dans une version récente de Chromium.
Mes deux centimes
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');
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.
babel
par l'auteur. Bien que la réponse de Phil Ricketts clarifie le problème, ce qui est bien, cette réponse est une solution directe au problème de l'auteur.
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/core
et @babel/preset
qui 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 .babelrc
dans 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.js
et au-delà a travaillé avec imports/exports
maintenant vous l'exécutez commenode index.js
Remarque: en cas d' app.js
utilisation 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 ... :)
export
ne sont disponibles que dans ES6, et ces modules fournissent la prise en charge d'ES6.