我正在使用ECMAScript 6编写一些前端代码(通过BabelJS进行转译,然后通过Browserify进行浏览器化),这样我就可以在一个文件中拥有一个类,将其导出并在另一个文件中导入。
我实现这个的方法是:
export class Game {
constructor(settings) {
...
}
}
然后在导入这个类的文件中,我执行以下操作:
import {Game} from "../../lib/pentagine_browserified.js";
var myGame = new Game(settings);
我用 grunt
编译它,这是我的 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"]);
};
然而,在调用new Game(
时,我收到了以下错误:
Uncaught TypeError: undefined is not a function
因此,我的做法是分析Babel和Browserify生成的代码,并在PlayState_browserified.js
中找到了这行代码:
var Game = require("../../lib/pentagine_browserified.js").Game;
我决定打印require
输出:
console.log(require("../../lib/pentagine_browserified.js"));
这只是一个空对象。我决定查看pentagine_browserified.js
文件:
var Game = exports.Game = (function () {
看起来它正确地导出了类,但由于某些其他原因,在另一个文件中没有被要求。
此外,我确定该文件被正确地要求,因为更改字符串 "../../lib/pentagine_browserified.js"
会抛出 Not Found
错误,所以它正在寻找正确的文件,这一点我很确定。
export default Game
。 - Kanan Farzali