web-dev-qa-db-fra.com

Exporter une classe avec ES6 (Babel)

J'écris du code frontal avec ECMAScript 6 (transcrit avec BabelJS, puis navigué avec Browserify) afin de pouvoir avoir une classe dans un fichier, l'exporter et l'importer dans un autre fichier.

Voici comment je le fais:

export class Game {
    constructor(settings) {

    ...

    }
}

Et puis sur le fichier qui importe la classe que je fais:

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

Je le compile ensuite avec grunt, ceci est mon 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"]);
};

Cependant, sur le new Game( appel, j'obtiens l'erreur suivante:

Uncaught TypeError: undefined is not a function

En tant que tel, j’ai analysé le code généré par Babel et Browserify et j’ai trouvé cette ligne sur PlayState_browserified.js:

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

J'ai décidé d'imprimer la sortie require:

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

Et ce n'est qu'un objet vide. J'ai décidé de vérifier le pentagine_browserified.js fichier:

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

Il semble que la classe soit correctement exportée, mais pour une autre raison, il n'est pas requis sur l'autre fichier.

De plus, je suis sûr que le fichier est requis correctement car la modification de la chaîne "../../lib/pentagine_browserified.js" crache un Not Found _ erreur, il s’agit donc du bon fichier, dont je suis sûr.

javascriptgruntjsbrowserifyecmascript-6babeljs
27
David Gomes

Browserify est censé être alimenté par un seul fichier "point d'entrée", à travers lequel il parcourt de manière récursive toutes vos instructions require, en important le code depuis d'autres modules. Donc, vous devriez être require 'ing les versions _babel.js De modules, pas _browserified.js.

À première vue, vous souhaitez que le "point d'entrée" de votre application soit demos/helicopter_game/PlayState_browserified.js, Ouais? Si c'est le cas:

  • Dans PlayState.js, remplacez-le par import {Game} from "../../lib/pentagine_babel.js";.
  • Dans Gruntfile.js, supprimez "lib/pentagine_browserified.js": "lib/pentagine_babel.js".

Travaille pour moi. Faites-moi savoir si cela suffit ou si je comprends mal vos besoins ici.

P.S. Vous pouvez utiliser babelify pour éviter d’avoir des tâches Grunt distinctes pour Babel et Browserify. Voir ma réponse ici pour un exemple.

18
XåpplI'-I0llwlg'I -

J'avais une configuration de fichier légèrement différente, ce qui m'a donné quelques difficultés à obtenir la syntaxe "require" pour fonctionner dans Node, mais cet article m'a montré comment utiliser la version babel du nom de fichier.

J'utilise WebStorm avec l'option FileWatcher définie sur Babel. FileWatcher est configuré pour surveiller tous les fichiers avec le suffixe .jsx et renommer le fichier de sortie compilé de {mon_fichier} .jsx en {mon_fichier}.

Donc, dans mon cas de test, j'ai 2 fichiers:

Person.jsx:

class Person { ... }

export { Person as default}

et un autre fichier qui veut l'importer:

Test.jsx:

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

Je ne pouvais pas obtenir l'instruction "require" pour trouver le module avant de commencer le chemin du fichier avec "./" et d'ajouter également "-compiled.js" pour spécifier correctement le nom du fichier afin que Node es5 pourrait trouver le module.

J'ai également pu utiliser la syntaxe "import":

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

Depuis que j'ai configuré mon projet WebStorm en tant que projet Node ES5, je dois exécuter 'Test-compiled.js' (et non 'Test.jsx').

14
Stefan Musarra