Gulp babel, экспорт не определен

Рассмотрим следующий пример кода (и, возможно, я делаю это неправильно?)

 var FlareCurrency = {

 };

export {FlareCurrency};

У меня есть следующая задача:

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/'));
});

Когда я запускаю это, я получаю следующее:

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

Для удовольствия, я хотел запустить его в консоли, да, я знаю, что он ничего не делает, но я не ожидал увидеть это:

Uncaught ReferenceError: exports is not defined(…)

Неограниченная версия:

"use strict";

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

exports.FlareCurrency = FlareCurrency;

выдает ту же ошибку. Идеи?

Ответы

Ответ 1

На самом деле это не проблема с babel, вы просто пытаетесь запустить код CommonJS (переведенный из ES6 export) в браузере без подготовки. CommonJS не запускается в браузере, вам нужно использовать инструмент для его упаковки для браузера, например Webpack или Browserify.

Просто по совпадению на этой неделе я создал небольшой проект на Github, который показывает установку кода Gulp + ES6 (с помощью export) + Babel + Webpack: gulp-es6-webpack-example.

В моем примере вы можете загрузить JS-код в браузере либо синхронно (предварительно загружен), либо асинхронно (lazy-load).