gpt4 book ai didi

javascript - 使用 ES6 (Babel) 导出类

转载 作者:行者123 更新时间:2023-12-02 23:27:04 25 4
gpt4 key购买 nike

我正在使用 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/pentaine_browserified.js" 会输出 Not Found 错误,所以我确信它会寻找正确的文件。

最佳答案

Browserify 旨在提供一个“入口点”文件,通过该文件递归遍历所有 require 语句,从其他模块导入代码。因此,您应该require'模块的_babel.js版本,而不是_browserified.js版本。

从表面上看,您打算将应用的“入口点”设置为 demos/helicopter_game/PlayState_browserified.js,是吗?如果是这样的话:

  • 在 PlayState.js 中,将其更改为 import {Game} from "../../lib/pentagine_babel.js";
  • 在 Gruntfile.js 中,删除 "lib/pentaine_browserified.js": "lib/pentaine_babel.js"

对我有用。让我知道这是否足够,否则我误解了您的要求。

附注您可以使用babelify以避免 Babel 和 Browserify 有单独的 Grunt 任务。看我的回答here举个例子。

关于javascript - 使用 ES6 (Babel) 导出类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29353728/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com