javascript - example - import export js es6

Exportando una clase con ES6(Babel)

Question

Estoy escribiendo algún código de frontend con ECMAScript 6 (transpilado con BabelJS y luego browserified con Browserify) para poder tener una clase en un archivo, exportarlo e importarlo en otro.

La forma en que estoy haciendo esto es:

export class Game {
    constructor(settings) {

    ...

    }
}

Y luego en el archivo que importa la clase que hago:

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

Luego lo compilo con un 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 el new Game( llamada, me aparece el siguiente error:

Uncaught TypeError: undefined is not a function

Como tal, 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 está solicitando correctamente porque al cambiar la cadena "../../lib/pentagine_browserified.js" un error Not Found , por lo que se busca el archivo correcto, estoy seguro acerca de.

Answer 1

Browserify está destinado a ser alimentado con un único archivo de "punto de entrada", a través del cual recursivamente recorre todas sus declaraciones require , importando el código de otros módulos. Por lo tanto, debe require las versiones de los módulos _browserified.js , no las _browserified.js .

Desde el punto de vista de ello, tiene la intención de que el "punto de entrada" de su aplicación sea demos/helicopter_game/PlayState_browserified.js , ¿sí? Si ese es el caso:

• En PlayState.js, cámbielo para import {Game} from "../../lib/pentagine_babel.js"; .
• En Gruntfile.js, elimine "lib/pentagine_browserified.js": "lib/pentagine_babel.js" .

Funciona para mi. Déjeme saber si eso es suficiente o si no entiendo sus requisitos aquí.

PS Puedes usar babelify para evitar tener tareas Grunt separadas para Babel y Browserify. Vea mi respuesta here para un ejemplo.

Answer 2

Tenía una configuración de archivo ligeramente diferente, que me dio algunas dificultades para obtener la sintaxis "requerida" para funcionar en Node, pero esta publicación me dio una pista sobre cómo usar la versión del nombre de archivo de babel-ified.

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

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

Person.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 agregar ''-compiled.js'' para especificar correctamente el nombre del archivo para que Node es5 pueda encontrar el módulo.

También pude usar la sintaxis de "importar":

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

Desde que configuré mi proyecto WebStorm como un proyecto Node ES5, tengo que ejecutar ''Test-compiled.js'' (no ''Test.jsx'').