Какие знаешь подходы к сборке приложений

«Какие знаешь подходы к сборке приложений» — вопрос из категории Devops, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Основные подходы к сборке:

  1. Task Runners (Gulp, Grunt) - автоматизация задач (минификация, транспиляция, конкатенация). Пример Gulp:
gulp.task('scripts', () => {
  return gulp.src('src/js/*.js')
    .pipe(concat('bundle.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
});
  1. Module Bundlers (Webpack, Rollup, Parcel) - сборка модульных приложений с поддержкой зависимостей, tree-shaking. Webpack-пример:
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
  1. Compiler-based (Vite, Snowpack) - использование нативных ES-модулей в dev, быстрая сборка за счет ESM.

  2. Metaframeworks (Next.js, Nuxt) - включают сборку как часть фреймворка с оптимизациями под SSR/SSG.

Современные проекты чаще используют Webpack/Vite + плагины для обработки CSS, assets, Babel/TypeScript. Выбор зависит от масштаба проекта и требуемых оптимизаций.