用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）導出一個類

回答

相關問題