Gulp и Browserify - Добавляем Babel и Source Maps

В этом уроке вы узнаете, как улучшить существующий фронтенд‑workflow на основе Gulp, Browserify, Watchify и Browsersync, добавив Babelify для транспиляции современного JavaScript, а также настроив корректную работу sourcemaps через плагин exorcist для удобной отладки в браузере.

Зачем добавлять Babelify в сборку

Babelify позволяет использовать современные возможности JavaScript, даже если браузеры их ещё не поддерживают. Он интегрируется в Browserify как трансформер и обрабатывает файлы "на лету". Это делает процесс сборки предсказуемым, а код — совместимым с широким набором браузеров.

Преимущества использования Babelify

• Поддержка синтаксиса ES6+ и экспериментальных возможностей.
• Бесшовная интеграция с Browserify.
• Минимальная конфигурация — часто достаточно указать пресеты.
• Возможность расширения через плагины Babel.

Настройка sourcemaps с помощью exorcist

Sourcemaps позволяют отслеживать ошибки в исходных ES6+ файлах, а не в транспилированном бандле. Плагин exorcist нужен, чтобы извлечь sourcemap в отдельный файл, сохранив удобную структуру проекта.

Как работает exorcist

Exorcist перехватывает встроенную sourcemap, создаваемую Browserify, и переносит её в отдельный .map-файл. Это облегчает отладку и снижает вес основного бандла.

Преимущества раздельных sourcemaps

• Чистый и компактный итоговый bundle.js.
• Быстрая загрузка для пользователей.
• Удобная работа с отладчиком в DevTools.

Пример настройки Gulp для Babelify и exorcist

Ниже приведён демонстрационный пример конфигурации, который можно адаптировать под собственный проект.

const gulp = require('gulp');
const browserify = require('browserify');
const watchify = require('watchify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const exorcist = require('exorcist');

function bundle() {
  return browserify({
    entries: ['src/app.js'],
    debug: true
  })
  .transform(babelify.configure({
    presets: ['@babel/preset-env']
  }))
  .bundle()
  .pipe(exorcist('dist/bundle.js.map'))
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(gulp.dest('dist'));
}

gulp.task('default', bundle);

Итог

Добавление Babelify и корректная работа sourcemaps через exorcist делает ваш workflow гораздо удобнее, надёжнее и современнее. Вы сможете писать код на последних версиях JavaScript, быстрее отлаживать проект и поддерживать чистую структуру файлов.