用ES6（Babel）导出一个类

我正在用ECMAScript 6编写一些前端代码（用BabelJS编译，然后用Browserify进行浏览），这样我就可以在一个文件中创建一个类，导出并导入另一个文件文件。用ES6（Babel）导出一个类

我这样做的方法是：

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(调用，我得到了fo llowing错误：

Uncaught TypeError: undefined is not a function

由于这样，我所做的是分析由巴贝尔和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错误，因此它会针对正确的文件进行操作，这一点我确定。

来源

2015-03-30 David Gomes

你需要'export default Game' – 2017-09-29 11:27:34

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/pentagine_browserified.js": "lib/pentagine_babel.js"。

适合我。让我知道这是否足够，或者我误解了你的要求。

P.S.您可以使用babelify来避免为Babel和Browserify单独进行Grunt任务。例如，请参阅我的回答here。

来源

2015-04-02 15:45:15

我有一个略有不同的文件配置，给了我一些困难，让“require”语法在Node中工作，但是这篇文章给了我如何使用babel-ified版本的文件名的提示。

我正在使用WebStorm并将FileWatcher选项设置为Babel，并且我已将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”语句来查找模块，直到我用'./'开始文件路径并添加'-comp iled.js'正确指定文件名，以便节点es5可以找到该模块。

我也能使用“导入”语法：

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

因为我已经建立了我的WebStorm项目作为一个节点ES5的项目，我必须运行“测试-compiled.js”（不'Test.jsx'）。

来源

2016-01-07 22:17:42

用ES6（Babel）导出一个类

回答

相关问题