Использование модулей ES6 с traceur в одном файле сборки

Question

У меня просто простой вопрос, который я не могу найти в любом месте, он гуглил все это утро. Существует мало информации о traceur, и когда это не так ясно, по крайней мере для меня.

Как должны быть реализованы модули ES6 при переносе с помощью traceur одного выходного файла и использовании его в браузере с traceur-runtime? Импорт и экспорт продолжают получать неожиданный токен.

Я использую gulp-traceur и уже опробовал все опции модулей //'commonjs' //'amd', 'commonjs', 'instantiate', 'inline', 'register'.

У меня есть одно сомнение в том, что я продолжаю находить ответы о commonjs, но моя идея использовать модули ES6 состоит в том, чтобы иметь разные источники, а затем импортировать их из основного и иметь весь этот результат, скомпилированный в один файл (я имею в виду, что я не нужна асинхронная загрузка модулей в браузере)

Вот глоток

gulp.task('scripts', function() {
      del.sync(['bin/js/main.min.js']);
      del.sync(['bin/js/main.min.js.map']);
      gulp.src(["./src/app/init.js", "./src/app/elements/circle.js", "./src/app/app.js"])
        .pipe(sourcemaps.init())
        .pipe(traceur({modules : 'inline', sourceMaps: 'inline', experimental: "true"})) //'commonjs' //'amd', 'commonjs', 'instantiate', 'inline', 'register'
          .on('error', errorParser)
        .pipe(jshint())
          .pipe(jshint.reporter('jshint-stylish'))
        .pipe(uglify({mangle: true})).on('error', errorParser)
        .pipe(concat('main.min.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('bin/js'))
        .pipe(livereload({ auto: true }));
    });

Неожиданный токен приходит из приложения при импорте

import Circle from './elements/circle';

или же

import * as Circle from './elements/circle.js';

(Пробовал несколько способов)

Также из круга.js при экспорте

export default Circle; или же export Circle; (тоже пробовал несколько способов)

Answer 1

В конце я закончил переключать Traceur на Babel, как советовал @Jeff в своем комментарии.

Поэтому я решил использовать Babel + Browserify + Gulp

Я думаю, что ошибка, которую я получаю, заключается в том, что код передается правильно, но ни один клиент не может управлять модулями, но для этого требуется что-то вроде require или commonjs для обработки модулей. Главное сомнение здесь, потому что я ожидаю, что traceur уже преобразует код в ES5 понятный код. Но опять же, отсутствие информации не указывает на это ясно (я гуглил более 6 часов)

Я использую инструмент Browserify, babelify, который автоматически переводит синтаксис модуля ES6 в понятные браузеру commonjs.

Это сделало мой день. Из-за недостатка информации я потратил время, чтобы понять / предположить, что использование Browserify с Traceur также будет работать, но, посмотрев на Babel, я думаю, что он имеет преимущества перед Traceur, особенно отсутствие необходимости в runtime.js на клиенте и выводе является более последовательным и менее раздутым.

Я вставляю ниже задание, которое я использую, если это поможет кому-то в будущем:

gulp.task('scripts', function() {

  del.sync(['bin/js/main.min.js']);
  del.sync(['bin/js/main.min.js.map']);

  gulp.src(["./src/**/*.js", "!./src/lib/*.js"])
    .pipe(gp.jshint())
    .pipe(gp.jshint.reporter('jshint-stylish'));

  browserify({
    entries: './src/app/app.js',
    debug: true
  })
  .transform(babelify)
  .bundle().on('error', errorParser)

  .pipe(source('main.js'))
  .pipe(gulp.dest('./bin/js'))
    .pipe(gp.livereload({ auto: true }));

});

Дайте мне знать, если у вас есть лучший подход.

Answer 2

На самом деле можно загрузить модули ES6 прямо в браузере.

1) Загрузите библиотеки транспортера

<!-- transpiler -->
<script type="text/javascript" src="lib/traceur.js"></script>
<script type="text/javascript" src="lib/es6-module-loader.js"></script>

2) импортировать свои кодированные модули, я использовал System.paths здесь, однако это не обязательно, вы можете импортировать с прямым относительным путем:

System.paths['gso/eonjs/*'] = 'dist/es6/gso/eonjs/*.js';

var Eon;
var MomentRecurRule;
var RRuleRecurRule;
var RecurRuleContainer;
System.import('gso/eonjs/EonJS').then( function( _exports ) {
    Eon = _exports;
    MomentRecurRule = Eon.MomentRecurRule;
    RRuleRecurRule = Eon.RRuleRecurRule;
    RecurRuleContainer = Eon.RecurRuleContainer;
});

Что оставляет основной API и классы в глобальном пространстве имен.

System.import() является асинхронным, поэтому код будет переходить на следующую строку до того, как модули действительно загрузятся - загрузочный виджет сделает то, что я догадываюсь на этом этапе.

Смотрите example-es6-modules.html для полного рабочего примера.

В настоящее время я использую traceur только по историческим причинам, что я собираюсь сделать, хотя в целом остаюсь настолько технологичным. насколько возможно нейтрально - поэтому, хотя я использовал traceur, я стараюсь не привязываться к использованию traceur - проект может относительно легко переключиться на babel (тактически это основной принцип). Хотя есть много веских причин для кодирования с babel, и я более или менее уверен, что в какой-то момент я сделаю переход по этим причинам (и все еще буду счастлив, когда все остальные вернутся к нормальному кодированию с полностью поддерживаемым и новым). отчеканенный ES2015).