Итак, недавно я настраивал сборку Gulp для проекта, использующего Babel для компиляции ES2015 и React JSX, но с одной изюминкой: мне нужно создать несколько пакетов.

Создать несколько пакетов с помощью Browserify несложно. Это практически то же самое, что создать один пакет. Все, что вам нужно сделать, это сопоставить разные точки входа, вернуть поток для каждой и объединить их вместе.

// A simple example
gulp.task(‘js’, function() {
  // Create a stream for each entry point
  var streams = files.map(function(fileName) {
     gutil.log(‘Begin build for’, fileName);
     // In goes your JSX entry point
     return browserify(fileName + '.jsx', {debug: true})
       .transform(babelify.configure({
         presets: [‘es2015’, ‘react’]
       }))
       .bundle()
       // ... pipe out to the rest of the build here
     });
   return eventStream
     .merge(streams);
});

Однако проблема с этим подходом - время сборки. Для этого небольшого примерного проекта, над которым я работаю, время сборки JavaScript составляло 8 секунд.

К счастью, есть способ сократить время сборки. У создателей Browserify также есть инструмент Watchify, который отслеживает изменения в ваших файлах JavaScript и восстанавливает их на месте.

Возможно, вам интересно, почему это важно, если в Gulp есть функция часов. Ответ заключается в том, что Watchify кэширует созданные файлы, восстанавливая только то, что было изменено. Это приводит к сокращению времени сборки.

Чтобы использовать его, мы создадим задачу отслеживания JavaScript на основе базовой задачи, описанной выше:

// A simple example using watchify
gulp.task(‘watch:js’, function() {
  var streams = files.map(function(fileName) {
    // Here we instead create a callback to pass to watchify for its
    // update event.
    var bundler = watchify(browserify(fileName + '.jsx',
        {debug: true})
      ).transform(babelify.configure({
        presets: [‘es2015’, ‘react’]
      })),
      watchfn = getJSWatcher(bundler, fileName + ‘.js’);
    bundler.on(‘update’, watchfn);
    bundler.on(‘log’, gutil.log); // watchify doesn't log by itself
    return watchfn(); // run the actual build for the first time
  });
  return eventStream
    .merge(streams);
});
// Create a function that bundles the code and gives it
// the appropriate file name.
function getWatchifyHandler(bundler, fileName) {
  return function() {
    gutil.log(‘Begin build for’, fileName);
    return bundler.bundle()
    // ... pipe out to the rest of the build here
  }
}

Здесь мы позволяем Watchify обрабатывать файлы JavaScript за нас, что позволяет нам использовать их кеширование. Используя это, мое начальное время сборки JavaScript все еще составляет около 8 секунд, но последующие сборки занимают менее 3 секунд. Это также усиливает мощь функций первого класса JavaScript, позволяя нам создавать соответствующую функцию сборки для каждого отдельного пакета по запросу.

Надеюсь, вам понравилось читать этот пост и он оказался полезным.