Eksportowanie klasy za pomocą ES6 (Babel)

Question

Piszę kod frontendu za pomocą ECMAScript 6 (przeniesiony za pomocą BabelJS, a następnie przeglądam w przeglądarce za pomocą Browserify), dzięki czemu mogę mieć klasę w jednym pliku, wyeksportować ją i zaimportować w innym pliku plik.

Droga Robię to:

export class Game { 
    constructor(settings) { 

    ... 

    } 
} 

A potem na pliku, który importuje klasę robię:

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

I następnie skompilować go z grunt, to moja 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"]); 
}; 

Jednak na wywołanie new Game(, otrzymuję fo Błąd llowing:

Uncaught TypeError: undefined is not a function 

Jak tak, to co zrobiłem było analizować kod wygenerowany przez Babel i Browserify i znalazłem ten wiersz na PlayState_browserified.js:

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

postanowiłem wydrukować wyjście require:

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

I to jest tylko pusty przedmiot. Postanowiłem sprawdzić plik pentagine_browserified.js:

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

Wydaje się, że jest prawidłowo eksportu klasę, ale z jakiegoś innego powodu nie jest on wymagany w innym pliku.

Ponadto jestem pewien, że plik jest wymagany, ponieważ zmiana ciągu znaków "../../lib/pentagine_browserified.js" powoduje wyprowadzenie błędu Not Found, więc na pewno trafi na właściwy plik.

Answer 1

Poszukiwacz jest przeznaczony do podawania pojedynczego pliku "punktu wejścia", przez który rekursywnie przechwytuje wszystkie twoje instrukcje require, importując kod z innych modułów. Więc powinieneś być require "z wersji _babel.js modułów, a nie _browserified.js.

Wygląda na to, że "punkt wejścia" aplikacji ma być demos/helicopter_game/PlayState_browserified.js, tak? W takim przypadku:

• W PlayState.js zmień go na import {Game} from "../../lib/pentagine_babel.js";.
• W pliku Gruntfile.js usuń "lib/pentagine_browserified.js": "lib/pentagine_babel.js".

Działa u mnie. Daj mi znać, jeśli to wystarczy lub nie rozumiem Twoich wymagań tutaj.

P.S. Możesz użyć babelify, aby uniknąć oddzielnych zadań Grunt dla Babel i Browserify. Zobacz moją odpowiedź here na przykład.

Answer 2

Miałem nieco inną konfigurację plików, co dawało mi pewną trudność w uzyskaniu "wymaganej" składni do pracy w węźle, ale ten post dał mi wskazówkę, jak używać wersji nazwy pliku z babel-ified.

Używam WebStorm z opcją FileWatcher ustawioną na Babel i mam FileWatcher skonfigurowany do oglądania wszystkich plików z przyrostkiem .jsx, i zmień nazwę skompilowanego pliku wyjściowego z {my_file} .jsx na {mój_ plik} - skompilowałem. js.

Tak więc w moim przypadku testu, mam 2 pliki:

Person.jsx:

class Person { ... } 

export { Person as default} 

i inny plik, który chce go importować:

Test.jsx:

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

Nie można pobrać instrukcji "require", aby znaleźć moduł, dopóki nie uruchomię ścieżki pliku za pomocą "./", a także dodaję "-comp iled.js ', aby poprawnie określić nazwę pliku, aby węzeł es5 mógł go znaleźć.

byłem też w stanie korzystać z „importowanej” składnię:

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

Odkąd skonfigurować mojego projektu WebStorm jako projekt węzła ES5, muszę uruchomić „test-compiled.js” (nie "Test.jsx").