Exportation d'une classe avec ES6 (Babel)
J'écris du code frontend avec ECMAScript 6 (transpilé avec BabelJS, puis browserified avec Browserify) afin que je puisse avoir une classe dans un fichier, l'exporter et l'importer dans un autre fichier.
La façon dont je fais ceci est:
export class Game {
constructor(settings) {
...
}
}
Et puis sur le fichier qui importe la classe que je fais:
import {Game} from "../../lib/pentagine_browserified.js";
var myGame = new Game(settings);
Je puis le compiler avec grunt
, c'est mon Gruntfile
:
module.exports = function(grunt) {
"use strict";
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-browserify');
grunt.initConfig({
"babel": {
options: {
sourceMap: false
},
dist: {
files: {
"lib/pentagine_babel.js": "lib/pentagine.js",
"demos/helicopter_game/PlayState_babel.js": "demos/helicopter_game/PlayState.js"
}
}
},
"browserify": {
dist: {
files: {
"lib/pentagine_browserified.js": "lib/pentagine_babel.js",
"demos/helicopter_game/PlayState_browserified.js": "demos/helicopter_game/PlayState_babel.js"
}
}
}
});
grunt.registerTask("default", ["babel", "browserify"]);
};
Cependant, sur la new Game(
appeler, j'obtiens l'erreur suivante:
Uncaught TypeError: undefined is not a function
Ainsi, ce que j'ai fait a été analyser le code généré par Babel et Browserify et j'ai trouvé cette ligne sur PlayState_browserified.js
:
var Game = require("../../lib/pentagine_browserified.js").Game;
, j'ai décidé d'imprimer la require
sortie:
console.log(require("../../lib/pentagine_browserified.js"));
Et ce n'est qu'un objet vide. J'ai décidé de vérifier le fichier pentagine_browserified.js
:
var Game = exports.Game = (function () {
Il semble qu'il exporte correctement la classe, mais pour une autre raison, il n'est pas nécessaire sur l'autre fichier.
En outre, je suis sûr que le fichier est requis correctement car changer la chaîne "../../lib/pentagine_browserified.js"
crache un Not Found
erreur, donc ça va pour le bon fichier, dont je suis sûr.
2 réponses
Browserify est destiné à être alimenté par un seul fichier "point d'entrée", à travers lequel il traverse récursivement toutes vos instructions require
, en important le code à partir d'autres modules. Vous devriez donc require
' ing les versions _babel.js
des modules, pas celles _browserified.js
.
D'après les apparences, vous avez l'intention que le "point d'entrée" de votre application soit demos/helicopter_game/PlayState_browserified.js
, Oui? Si c'est le cas:
- Dans PlayState.js, changez-le en
import {Game} from "../../lib/pentagine_babel.js";
. - Dans Gruntfile.js, supprimer
"lib/pentagine_browserified.js": "lib/pentagine_babel.js"
.
Ça marche pour moi. Permettez-moi de sachez si cela suffit Ou Je ne comprends pas vos exigences ici.
P.S. vous pouvez utiliser babelify pour éviter d'avoir des tâches grognantes séparées pour Babel et Browserify. Voir ma réponse ici pour un exemple.
J'avais une configuration de fichier légèrement différente, ce qui m'a donné des difficultés à faire fonctionner la syntaxe" require " dans Node, mais ce post m'a donné l'indication sur la façon d'utiliser la version babel-ified du nom de fichier.
J'utilise WebStorm avec L'option FileWatcher définie sur Babel, et J'ai le FileWatcher configuré pour regarder tous les fichiers avec suffixe .jsx, et renommer le fichier de sortie compilé à partir de {my_file}.jsx à {my_file}-compilé.js.
, Donc dans mon cas de test, j'ai 2 fichiers:
Personne.jsx:
class Person { ... }
export { Person as default}
Et un autre fichier qui veut l'importer:
Test.jsx:
var Person = require('./Person-compiled.js');
Je n'ai pas pu obtenir l'instruction "require" pour trouver le module jusqu'à ce que je commence le chemin du fichier avec '.et aussi ajouter " - compilé.JS ' pour spécifier correctement le nom du fichier afin que le nœud es5 puisse trouver le module.
J'ai également pu utiliser la syntaxe "import":
import Person from './Person-compiled.js';
Depuis que j'ai configuré mon projet WebStorm en tant que projet Node ES5, je dois exécuter ' test-compilé.js' (pas ' Test.jsx').