gulp babel, les exportations ne sont pas définies

Question

Considérez l'exemple de code suivant (et peut-être que je le fais mal?)

 var FlareCurrency = {

 };

export {FlareCurrency};

J'ai la tâche suivante:

gulp.task("compile:add-new-currency-minified", function(){
  return gulp.src('src/add-new-currency/**/*.js')
             .pipe(babel())
             .pipe(concat('Flare-AddNewCurrency.js'))
             .pipe(uglify({"preserveComments": "all"}))
             .pipe(gulp.dest('dist/minified/'));
});

Lorsque je lance ceci, j'obtiens le texte suivant:

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var FlareCurrency={};exports.FlareCurrency=FlareCurrency;

Pour le plaisir, je voulais le lancer dans la console, oui je sais que ça ne fait rien mais je ne m'attendais pas à voir ça:

Uncaught ReferenceError: exports is not defined(…)

La version non minifiée:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var FlareCurrency = {};

exports.FlareCurrency = FlareCurrency;

jette la même erreur. Idées?

Answer 1

Ce n'est pas vraiment un problème, mais vous essayez simplement d'exécuter du code CommonJS (transpilé depuis ES6 export) dans le navigateur sans préparation. CommonJS ne s'exécute pas sur le navigateur, vous devez utiliser un outil pour le configurer, tel que Webpack ou Browserify .

Juste par hasard, cette semaine, j'ai créé un petit projet sur Github qui montre une configuration de code Gulp + ES6 (utilisant export) + Babel + Webpack: exemple: gulp-es6-webpack-example .

Dans mon exemple, vous pouvez charger du code JS sur le navigateur de manière synchrone (pré-chargé) ou asynchrone (chargé paresseux).