Exportieren einer Klasse mit ES6 (Babel)

Question

Ich schreibe etwas Frontend-Code mit ECMAScript 6 (transpiliert mit BabelJS, und dann mit Browserify browserifiziert), so dass ich eine Klasse in einer Datei haben kann, exportieren und in eine andere importieren Datei.

So wie ich das tue ist:

export class Game { 
    constructor(settings) { 

    ... 

    } 
} 

Und dann auf die Datei, die die Klasse ich importiert:

import {Game} from "../../lib/pentagine_browserified.js"; 
var myGame = new Game(settings); 

ich kompilieren Sie es dann mit grunt ist, das ist mein 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"]); 
}; 

Doch auf den new Game( Anruf, erhalte ich die fo llowing Fehler:

Uncaught TypeError: undefined is not a function 

Wie so, was ich tat, war den generierten Code von Babel und Browserify analysieren und ich fand diese Zeile auf PlayState_browserified.js:

var Game = require("../../lib/pentagine_browserified.js").Game; 

ich die require Ausgabe drucken entschieden:

console.log(require("../../lib/pentagine_browserified.js")); 

Und es ist nichts als ein leeres Objekt. Ich beschloss, die pentagine_browserified.js Datei zu überprüfen:

var Game = exports.Game = (function() { 

Es scheint, wie es richtig die Klasse exportiert, aber aus einem anderen Grund ist es nicht auf der anderen Datei erforderlich ist.

Ich bin mir auch sicher, dass die Datei ordnungsgemäß benötigt wird, weil das Ändern der Zeichenfolge "../../lib/pentagine_browserified.js" einen Not Found Fehler ausspuckt, so dass es für die richtige Datei geht, über die ich sicher bin.

Answer 1

Browserify soll eine einzige "Einstiegspunkt" -Datei erhalten, durch die es rekursiv alle Ihre require-Anweisungen durchläuft und den Code von anderen Modulen importiert. So sollten Sie require in den _babel.js Versionen der Module sein, nicht _browserified.js Einsen.

Aus dem Aussehen davon, haben Sie vor, für Ihre App "Einstiegspunkt" zu sein demos/helicopter_game/PlayState_browserified.js, yeah? Wenn dies der Fall ist:

• In PlayState.js, ändern Sie es in import {Game} from "../../lib/pentagine_babel.js";.
• Entfernen Sie in Gruntfile.js "lib/pentagine_browserified.js": "lib/pentagine_babel.js".

Funktioniert für mich. Lassen Sie mich wissen, ob das ausreicht oder ich Ihre Anforderungen hier falsch verstehe.

P.S. Sie können babelify verwenden, um separate Grunt-Aufgaben für Babel und Browserify zu vermeiden. Ein Beispiel finden Sie in meiner Antwort here.

Answer 2

Ich hatte eine etwas andere Dateikonfiguration, was mir einige Schwierigkeiten bereitet hat, die "require" -Syntax in Node zu bekommen, aber dieser Beitrag gab mir einen Hinweis darauf, wie man die babel-faced Version des Dateinamens benutzt.

Ich verwende WebStorm mit der Option FileWatcher auf Babel, und ich habe den FileWatcher so konfiguriert, dass er alle Dateien mit dem Suffix .jsx sieht und die kompilierte Ausgabedatei von {my_file} .jsx in {my_file} -compiled umbenennt. js.

Also in meinem Testfall, habe ich 2 Dateien:

Person.jsx:

class Person { ... } 

export { Person as default} 

und eine andere Datei, um sie importieren will:

Test.jsx:

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

Ich konnte die "require" -Anweisung nicht finden, um das Modul zu finden, bis ich den Dateipfad mit './' gestartet habe und auch '-comp iiled.js ', um den Dateinamen korrekt anzugeben, damit Knoten es5 das Modul finden kann.

Ich war auch in der Lage, die „Import“ Syntax:

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

Da ich mein WebStorm Projekt als Knoten ES5 Projekt einrichten, ich habe ‚Test compiled.js‘ laufen (nicht "Test.jsx").