使用 ES6 (Babel) 导出 class

Question

我正在用 ECMAScript 6 编写一些前端代码（用 BabelJS 转译，然后用 Browserify 进行浏览器化），这样我就可以在一个文件中有一个 class，将其导出并导入到另一个文件中。

我这样做的方式是：

export class Game {
    constructor(settings) {

    ...

    }
}

然后在导入 class 的文件上：

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 () {

它似乎正确地导出了 class，但由于某些其他原因，其他文件不需要它。

另外，我确信文件被正确要求，因为更改字符串 "../../lib/pentagine_browserified.js" 会吐出一个 Not Found 错误，所以它正在寻找正确的文件，我敢肯定关于。

Answer 1

Browserify 旨在提供单个 "entry point" 文件，通过该文件递归遍历所有 require 语句，从其他模块导入代码。所以你应该 require'ing 模块的 _babel.js 版本，而不是 _browserified.js 版本。

从外观上看，您打算将应用的 "entry point" 设为 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 to avoid having separate Grunt tasks for Babel and Browserify. See my answer 作为示例。

Answer 2

我的文件配置略有不同，这让我很难在 Node 中使用 "require" 语法，但是这个 post 给了我如何使用 [=] 的提示36=]版本的文件名。

我正在使用将 FileWatcher 选项设置为 Babel 的 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”以正确指定文件名，所以节点 es5 可以找到模块。

我还能够使用 "import" 语法：

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

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

使用 ES6 (Babel) 导出 class

Exporting a class with ES6 (Babel)

javascript

browserify

gruntjs

ecmascript-6

babeljs