使用ES6（Babel）导出课程 [英] Exporting a class with ES6 (Babel)

问题描述

我正在用ECMAScript 6编写一些前端代码（用BabelJS进行浏览，然后用Browserify进行浏览），以便我可以在一个文件中导入一个类，并将其导入另一个文件。

我这样做的方式是：

  export class Game {
构造函数（设置）{
 
 ... 
 
} 
} 
  

然后在导入我做的类的文件中：

  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：{
文件：{
lib / pentagine_babel.js：lib / pentagine.js，
demos / helicopter_game / PlayState_babel.js：demos / helicopter_game / PlayState .js
} 
} 
}，
 
browserify：{
 dist：{
文件：{
 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]）; 
}; 
  

但是，在新游戏（ ，我收到以下错误：

 未捕获TypeError：undefined不是函数
 因此，我所做的是分析了Babel和Browserify生成的代码，我在 PlayState_browserified.js  code>：
  var Game = require（../../ lib / pentagine_browserified.js）。游戏; 
  
我决定打印 require 输出：
  console.log（require（../../ lib / pentagine_browserified.js））; 
  
它只不过是一个空对象，我决定查看 pentagine_browserified。 js  file：
  var Game = exports.Game =（function（）{
  
似乎它正确导出类，但由于其他原因，在另一个文件中不需要。 
 
 
另外，我确定该文件是正确的，因为更改字符串../../ lib / pentagine_browserified.js吐出一个找不到错误，所以它是正确的文件，我确定。
解决方案
 Browserify是为单个入口点文件提供的，通过该文件递归地遍历所有 require 语句，从其他模块导入代码。所以你应该是 require ' _babel.js 版本的模块，而不是 _browserified。 js 一个。
 
 
 
从外观来看，您打算将应用程序的入口点设置为演示/直升机_游戏/ PlayState_browserified.js ，是啊？如果是这样的情况：
 
 
 
 
 
在PlayState.js中，将它从../更改为 import {Game} .. / lib / pentagine_babel.js; 。
 
 
在Gruntfile.js中，删除lib / pentagine_browserified.js： lib / pentagine_babel.js。
 
 
 
 
 
适用于我。让我知道这是否足够，或者我在这里误解你的要求。
 
 
 
您可以使用 babelify 避免为Babel和Browserify单独使用Grunt任务。请参阅我的答案这里为例。
 
I'm writing some frontend code with ECMAScript 6 (transpiled with BabelJS, and then browserified with Browserify) so that I can have a class in one file, export it and import it in another file.

The way I'm doing this is:
export class Game {
    constructor(settings) {

    ...

    }
}
And then on the file that imports the class I do:
import {Game} from "../../lib/pentagine_browserified.js";
var myGame = new Game(settings);
I then compile it with grunt, this is my 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"]);
};
However, on the new Game( call, I get the following error:
Uncaught TypeError: undefined is not a function
As so, what I did was analyse the generated code by Babel and Browserify and I found this line on PlayState_browserified.js:
var Game = require("../../lib/pentagine_browserified.js").Game;
I decided to print the require output:
console.log(require("../../lib/pentagine_browserified.js"));
And it is nothing but an empty object. I decided to check out the pentagine_browserified.js file:
var Game = exports.Game = (function () {
It seems like it is correctly exporting the class, but for some other reason it is not being required on the other file.

Also, I'm sure the file is being required properly because changing the string "../../lib/pentagine_browserified.js" spits out a Not Found error, so it is going for the right file, that I'm sure about.
解决方案
Browserify is meant to be fed a single "entry point" file, through which it recursively traverses all of your require statements, importing the code from other modules. So you should be require'ing the _babel.js versions of modules, not _browserified.js ones.

From the looks of it, you intend for your app's "entry point" to be demos/helicopter_game/PlayState_browserified.js, yeah? If that's the case:


In PlayState.js, change it to import {Game} from "../../lib/pentagine_babel.js";.
In Gruntfile.js, remove "lib/pentagine_browserified.js": "lib/pentagine_babel.js".


Works for me. Let me know if that suffices or I am misunderstanding your requirements here.

P.S. You can use babelify to avoid having separate Grunt tasks for Babel and Browserify. See my answer here for an example.

                        
这篇关于使用ES6（Babel）导出课程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！