Exportar una clase con ES6 (Babel)


Estoy escribiendo un código frontend con ECMAScript 6 (transpilado con BabelJS, y luego browserified con Browserify) para que pueda tener una clase en un archivo, exportarla e importarla en otro archivo.

La forma en que estoy haciendo esto es:{[16]]}

export class Game {
    constructor(settings) {

    ...

    }
}

Y luego en el archivo que importa la clase hago:

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

Luego lo compilo con grunt, este es mi 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"]);
};

Sin embargo, en la llamada new Game(, obtengo el siguiente error:

Uncaught TypeError: undefined is not a function

Así, lo que hice fue analizar el código generado por Babel y Browserify y encontré esta línea en PlayState_browserified.js:

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

Decidí imprimir la salida require:

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

Y no es más que un objeto vacío. Decidí revisar el archivo pentagine_browserified.js:

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

Parece que está exportando correctamente la clase, pero por alguna otra razón no se requiere en el otro archivo.

Además, estoy seguro de que el archivo se requiere correctamente porque cambiar la cadena "../../lib/pentagine_browserified.js" escupe un Not Found error, por lo que va para el archivo correcto, que estoy seguro.

Author: David Gomes, 2015-03-30

2 answers

Browserify está destinado a ser alimentado con un único archivo de "punto de entrada", a través del cual atraviesa recursivamente todas sus sentencias require, importando el código de otros módulos. Así que deberías estar require'ing las _babel.js versiones de módulos, no _browserified.js unos.

Por lo que parece, tienes la intención de que el "punto de entrada" de tu aplicación sea demos/helicopter_game/PlayState_browserified.js, ¿sí? Si ese es el caso:

  • En PlayState.js, cámbialo a import {Game} from "../../lib/pentagine_babel.js";.
  • En Gruntfile.js, remove "lib/pentagine_browserified.js": "lib/pentagine_babel.js".

Funciona para mí. Dejarme sepa si eso es suficiente o estoy malinterpretando sus requisitos aquí.

P.d. Puedes usar babelify para evitar tener tareas Grunt separadas para Babel y Browserify. Vea mi respuesta aquí para un ejemplo.

 18
Author: XåpplI'-I0llwlg'I -,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:54:50

Tenía una configuración de archivo ligeramente diferente, que me dio cierta dificultad para obtener la sintaxis "require" para trabajar en Node, pero este post me dio la pista sobre cómo usar la versión babel-ifed del nombre del archivo.

Estoy usando WebStorm con la opción FileWatcher establecida en Babel, y tengo el FileWatcher configurado para ver todos los archivos con sufijo .jsx, y cambie el nombre del archivo de salida compilado desde {mi_archivo}.jsx a {mi_archivo}-compilado.js.

Así que en mi caso de prueba, tengo 2 archivos:

Persona.jsx:

class Person { ... }

export { Person as default}

Y otro archivo que quiere importarlo:

Prueba.jsx:

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

No pude obtener la instrucción "require" para encontrar el módulo hasta que inicié la ruta del archivo con './ 'y también add' - compilado.js ' para especificar correctamente el nombre del archivo para que el nodo es5 pueda encontrar el módulo.

También pude usar la sintaxis "import":

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

Dado que he configurado mi proyecto WebStorm como un proyecto Node ES5, tengo que ejecutar 'Compilado de prueba.js" (no ' Prueba.jsx").

 11
Author: Stefan Musarra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-08 22:16:29