使用ES6（Babel）导出一个类

Question

我正在使用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 错误，所以它正在寻找正确的文件，这一点我很确定。

- David Gomes

---

你需要写成 export default Game。 - Kanan Farzali

Answer 1

Browserify旨在接收单个"入口点"文件，然后递归遍历所有的require语句，并从其他模块导入代码。因此，您应该使用模块的_babel.js版本，而不是_browserified.js版本。

看起来你想让你的应用程序的"入口点"是demos/helicopter_game/PlayState_browserified.js，是吗？如果是这样：

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

对我来说能够工作。如果这还不够或我误解了您的要求，请告诉我。

P.S. 您可以使用babelify来避免为Babel和Browserify设置单独的Grunt任务。这里有一个示例，可以参考我的回答这里。

- XåpplI'-I0llwlg'I -

Answer 2

我的文件配置略有不同，这让我在Node中使用“require”语法时遇到了一些困难，但是这篇文章给了我提示，让我知道如何使用babel处理过的文件名。

我正在使用设置为Babel的FileWatcher选项的WebStorm，并且我已将FileWatcher配置为监视所有后缀为.jsx的文件，并将编译输出文件从{my_file}.jsx重命名为{my_file}-compiled.js。

因此，在我的测试案例中，我有2个文件：

Person.jsx:

class Person { ... }

export { Person as default}

还有另一个文件想要导入它：

Test.jsx：

var Person = require('./Person-compiled.js');

我一直无法通过 "require" 语句找到该模块，直到我在文件路径前加上'./'并且在文件名后加上 '-compiled.js' 才能正确指定文件名，让Node es5找到该模块。

我还可以使用 "import" 语法：

import Person from './Person-compiled.js';

由于我将我的WebStorm项目设置为Node ES5项目，所以我必须运行'Test-compiled.js'（而不是'Test.jsx'）。

- Stefan Musarra