Exportando uma classe com ES6 (Babel)
Estou escrevendo um código de front-end com ECMAScript 6 (transpilado com BabelJS e depois navegado com Browserify) para que eu possa ter uma classe em um arquivo, exportá-lo e importá-lo para outro arquivo.
A maneira como estou fazendo isso é:
export class Game {
constructor(settings) {
...
}
}
E então no arquivo que importa a classe que eu faço:
import {Game} from "../../lib/pentagine_browserified.js";
var myGame = new Game(settings);
Eu então compilo comgrunt
, este é meuGruntfile
:
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"]);
};
No entanto, nonew Game(
chamada, recebo o seguinte erro:
Uncaught TypeError: undefined is not a function
Assim, o que fiz foi analisar o código gerado pelo Babel e pelo Browserify e encontrei essa linha emPlayState_browserified.js
:
var Game = require("../../lib/pentagine_browserified.js").Game;
Eu decidi imprimir orequire
resultado:
console.log(require("../../lib/pentagine_browserified.js"));
E não passa de um objeto vazio. Eu decidi verificar opentagine_browserified.js
Arquivo:
var Game = exports.Game = (function () {
Parece que está exportando corretamente a classe, mas por algum outro motivo, não está sendo exigido no outro arquivo.
Além disso, tenho certeza de que o arquivo está sendo solicitado corretamente porque alterar a string"../../lib/pentagine_browserified.js"
cospe umNot Found
erro, então está indo para o arquivo certo, que eu tenho certeza.