Разработка и сравнение фронтенд-инструментов конструирования

Мы должны вздыхать по поводу стремительного развития фронтенд-технологий, и нескончаемым потоком появляются различные новые идеи и фреймворки, способные повысить эффективность разработки. Но у всех у них есть одна общая черта: исходный код нельзя запустить напрямую, его нужно преобразовать для нормальной работы.

Первые две части этой статьи взяты из книги Ву Хаолиня «Введение в Webpack» 1.2, авторские права принадлежат оригинальному автору.

Инструменты сборки делают именно это, преобразовывая исходный код в исполняемый код JavaScript, CSS, HTML, включая следующее:

Транскодирование: компиляция TypeScript в JavaScript, SCSS в CSS и т. д.
Оптимизация файлов: сжатие JavaScript, CSS, HTML-кода, сжатие и объединение изображений и т. д.
Сегментация кода: извлечение общего кода из нескольких страниц, извлечение первого экрана не требует выполнения части кода, чтобы он мог быть записан асинхронно.
Слияние модулей: в модульном проекте будет много модулей и файлов, и модули необходимо классифицировать и объединить в один файл с помощью функции сборки.
Автоматическое обновление: отслеживайте изменения локального исходного кода, автоматически перестраивайте и обновляйте браузер.
Проверка кода: перед отправкой кода на склад необходимо проверить, соответствует ли код спецификации и проходит ли модульный тест.
Автоматический выпуск: после обновления кода код онлайн-релиза создается автоматически и передается в систему выпуска.

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

В истории появился ряд инструментов сборки, у них есть свои преимущества и недостатки. Поскольку фронтенд-инженеры знакомы с JavaScript, Node.js также может удовлетворить все потребности в сборке, поэтому большинство зданий разрабатываются с помощью Node.js, и пусть они вводят их один за другим.

1. История развития и тенденции строительных инструментов

Npm Scripts

Npm Scripts (скрипты NPM) — исполнитель задач. NPM — это менеджер пакетов, который поставляется с установкой Node, а Npm Script — это функция, встроенная в NPM, которая позволяет определять задачи с помощью поля scripts в файле package.json:

{
    "scripts":{
        "dev": "node dev.js",
        "pub": "node build.js"
    }
}

Поле scripts внутри представляет собой объект, каждое свойство соответствует скрипту Shell, приведенный выше код определяет две задачи: dev и pub. Базовый принцип реализации заключается в запуске команд сценария путем вызова Shell.Например, выполнение команды npm run pub эквивалентно выполнению команды node build.js.

преимущество: Преимущество встроенных скриптов npm, нет необходимости устанавливать другие зависимости
недостаток: Функция слишком проста.Хотя она предоставляет два хука, pre и post, она не может легко управлять зависимостями между несколькими задачами.

Прикрепил:руководство по использованию скриптов npm

Grunt

GruntСейчас это в принципе бесполезно, проще говоря. Grunt, как и Npm Scripts, также является исполнителем задач. Grunt имеет большое количество готовых плагинов, которые инкапсулируют общие задачи, а также могут управлять зависимостями между задачами и автоматически выполнять зависимые задачи.Конкретный код выполнения и зависимости каждой задачи прописаны в конфигурационном файле gruntfile.js.

ГрунтапреимуществоДа:

Гибкий, он отвечает только за выполнение определенных нами задач;
Большое количество многоразовых плагинов инкапсулирует общие задачи сборки.

ГрунтанедостатокИнтеграция не высокая, и ее можно использовать после написания большого количества конфигураций, и ее нельзя использовать из коробки.

Grunt эквивалентен эволюционной версии скриптов Npm, и он был создан, чтобы компенсировать недостатки скриптов Npm.

Gulp

Gulpпредставляет собой инструмент автоматизированной сборки на основе потока. Помимо управления задачами и выполнения задач, он также поддерживает мониторинг файлов, чтение и запись файлов. Gulp спроектирован так, чтобы быть очень простым и может поддерживать почти все сценарии сборки всего с помощью следующих 5 методов:

Зарегистрировать задачу через gulp.task;
Выполнять задачи через gulp.run;
Мониторинг изменений файлов через gulp.watch;
Прочитайте файл через gulp.src;
Завершите запись файла через gulp.dest.

Самой большой особенностью Gulp является введениепотокКонцепция, предоставляя ряд общих плагинов для обработки потока, потоки могут передаваться между плагинами, что обычно выглядит следующим образом:

// 引入 Gulp
var gulp = require("gulp");
// 引入插件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
....
// 便宜SCSS任务
gulp.task('scss', function() {
    // 读取文件，通过管道喂给插件
    gulp.src('./scss/*.scss')
        // SCSS 插件将 scss 文件编译成 css
        .pipe(sass())
        // 输出文件
        .pipe(guilp.dest('./css'));
});
// 合并压缩 JavaScript 文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dest'));
});
// 监听文件变化
gulp.task('watch', function() {
    // 当 SCSS 文件被编辑时执行 SCSS 任务
    gulp.watch('./scss/*.scss', ['sass']);
    gulp.watch('./js/*.js', ['scripts']);
});

Глотокпреимущество: простой в использовании, но гибкий, его можно создавать отдельно или в сочетании с другими инструментами.

недостаток: Подобно Грюнту. Интеграция не высокая, и использовать ее можно только после написания большого количества конфигураций, а использовать ее из коробки нельзя.

Думайте о Gulp как о расширенной версии Grunt. По сравнению с Grunt, в Gulp добавлены функции мониторинга файлов, чтения и записи файлов, а также потоковой передачи.

FIS 3

Fis3Это отличный инструмент для домашней сборки от Baidu. По сравнению с Grunt и Gulp эти инструменты предоставляют только основные функции. Fis3 объединяет функции сборки, обычно используемые разработчиками, как описано ниже.

Чтение и запись файлов: чтение файлов через fis.match и вывод пути к файлу конфигурации выпуска.
Местоположение ресурса: устраните зависимости между файлами и расположениями файлов.
Снятие отпечатков файлов: оптимизируйте кеширование браузера, добавляя штампы md5 к URL-адресам файлов при настройке выходных файлов с помощью useHash .
Компиляция файлов: преобразование файлов с помощью анализатора файлов конфигурации парсера, например, компиляция ES6 в ES5.
Сжать ресурсы: настроить метод сжатия кода через оптимизатор.
Слияние изображений: объединяйте изображения, импортированные из CSS, в один файл с помощью настройки спрайтера, чтобы уменьшить количество HTTP-запросов.

Широкое использование следующим образом:

// 加 md5
fis.match('*.{js,css,png}', {
    useHash: true
});
// 通过fis3-parse-typescript插件可将 TypeScript 文件转换成 JavaScript 文件
fis.match('*.ts', {
    parser: fis.plugin('typescript')
});
// 对CSS进行雪碧图合并
fis.match('*.css', {
    // 为匹配到的文件分配属性 useSprite
    useSprite: true
});
// 压缩 JavaScript
fis.match('*.js', {
    optimizer: fis.plugin('uglify-js')
});
// 压缩CSS
fis.match('*.css', {
    optimizer: fis.plugin('clean-css')
});
// 压缩图片
fis.match('*.png', {
    optimizer: fis.plugin('png-compressor')
});

Видно, что Fis3 очень мощный, с множеством встроенных функций, и можно выполнить много работы без особой настройки.

ФИС3преимущество: Он объединяет различные функции построения, необходимые веб-разработчикам, с простой конфигурацией и готовым использованием. ЭтонедостатокВ настоящее время он официально больше не обновляется и не поддерживается, а также не поддерживает последнюю версию Node.

FIS3 - это полное решение, ориентированное на веб-разработку, если Grunt, Gulp по сравнению с двигателем автомобиля, тогда FIS3 это полный автомобиль.

Webpack

Webpack
Webpack JavaScript представляет собой упакованный модульный инструмент, все файлы представляют собой модуль Webpack, загрузчик путем преобразования файлов, путем инъекции подключаемого модуля и, наконец, выводит объединенный файл во множество модулей. Webpack фокусируется на построении модульного проекта.

Изображение главной страницы официального сайта наглядно показывает определение Webpack, как показано ниже:
Webpack 的定义
Все файлы, такие как JavaScript, CSS, SCSS, изображения и шаблоны, являются модулями для Webpack. Преимущество этого заключается в том, что зависимости между модулями могут быть четко изображены для облегчения объединения и упаковки Webpack. После Webpack обработка в конечном итоге выводит статические ресурсы, которые может использовать браузер.

Webpack обладает большой гибкостью и может настраивать способ обработки файлов, примерно следующим образом:

module.exports = {
    // 所有模块的入口，webpack从入口开始递归解析出所有依赖的模块
    entry: './app.js',
    output: {
        // 将入口所依赖的所有模块打包成一个文件 bundle.js 输出
        filename: 'bundle.js'
    }
}

веб-пакетпреимуществоДа:

Сосредоточиться на обработке модульных проектов, может сделать это из коробки и за один шаг;
Может быть расширен с помощью плагина, полный и простой в использовании без потери гибкости;
Сценарии использования не ограничиваются веб-разработкой;
Сообщество большое и активное, и часто вводятся новые функции, идущие в ногу со временем, и для большинства сценариев можно найти существующие расширения с открытым исходным кодом;
хороший опыт разработки;

веб-пакетнедостатокДа: Я могу использовать только для принятия модульной проекта развития.

Rollup

RollupСборщик модулей, похожий на Webpack, но ориентированный на ES6. Его изюминка заключается в том, что в исходном коде ES6 выполняется Tree Shaking для удаления тех кодов, которые были определены, но не используются, а Scope Hoisting выполняется для уменьшения размера выходного файла и повышения производительности. Однако позже эти особенности Rollup были скопированы и реализованы в Webpack. Поскольку использование Rollup похоже на использование Webpakc, мы не будем подробно рассказывать, как использовать Rollup. , но с подробным описанием их различий:

Rollup — это альтернатива, появившаяся после популярности Webpack;
Экологическая цепочка Rollup не идеальна, и опыт не так хорош, как Webpack;
Функционал Rollup не такой полный, как у Webpack, но его настройка и использование проще;
Rollup не поддерживает разделение кода, но его преимущество в том, что в упакованном коде нет загрузки, выполнения и кэширования модуля Webpack.

Rollup имеет преимущество перед Webpack, когда речь идет об объединении библиотек JavaScript, поскольку связанный код меньше и быстрее. Однако его функции несовершенны, и во многих сценариях не найти готовых решений.

2. Почему стоит выбрать Webpack?

Инструменты сборки, представленные выше, отсортированы по времени их рождения, они являются продуктами времени и отражают тенденцию развития веб-разработки следующим образом:

В эпоху Npm Scripts и Grunt в веб-разработке больше дел, процесс усложняется, и для упрощения процесса вводится идея автоматизации;
В эпоху Gulp стали появляться некоторые новые языки для повышения эффективности разработки, а также появилась идея обработки процессов для упрощения процесса преобразования файлов, например преобразования ES6 в ES5;
В эпоху Webpack из-за популярности одностраничных приложений функции и коды реализации веб-страниц стали сложными и огромными, а веб-разработка была улучшена в сторону модульности.

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

С годами Webpack стал предпочтительным инструментом сборки, потому что:

Большинство команд используют технологии, которые идут в ногу со временем при разработке новых проектов.Эти технологии почти всегда используют "модуляризация + новый язык + новый фреймворк".Webpack может предоставить универсальное решение для этих новых проектов;
Webpack имеет хорошую экосистему и команду поддержки, которые могут обеспечить хороший опыт разработки и гарантировать качество;
Webpack используется и проверен большим количеством веб-разработчиков по всему миру и может найти учебные пособия и обмен опытом, необходимые на всех уровнях.

3. Разница между Gulp и Webpack

Люди часто сравнивают gulp и webpack, зная, что эти два инструмента сборки пересекаются по функциям, их можно использовать по отдельности или вместе, но принципиальная разница не так очевидна.

GulpАкцент делается на рабочем процессе фронтенд-разработки: мы можем настроить серию задач, определить транзакции, обрабатываемые задачами (такие как сжатие и слияние файлов, карта спрайтов, запуск сервера, контроль версий и т. д.), а затем определить порядок выполнения, чтобы позволить gulp выполнять эти задачи.task для построения всего процесса разработки интерфейса проекта.Проще говоря, Task Runner используется для запуска задач по одной..

Что Gulp не решил, так это проблему js-модуля, проблему организации структуры кода при написании кода.

WebpackЭто интерфейсное модульное решение, которое больше ориентировано на упаковку модулей.Мы можем рассматривать все ресурсы в разработке (изображения, файлы js, файлы css и т. д.) как модули и обрабатывать ресурсы через загрузчик (загрузчик) и плагины (плагины). in). , упакованные во внешние ресурсы, соответствующие развертыванию производственной среды.

Та же точка: Слияние и сжатие файлов (css, js), предварительная компиляция sass/less, запуск сервера, контроль версий.

разница, хоть все они и являются фронтенд-инструментами автоматизированного строительства, но глядя на их позиционирование, понимают, что они не эквивалентны.

Строго говоря, в gulp модульность — это не то, на чем он акцентирует внимание, он стремится стандартизировать процесс разработки интерфейса.
Очевидно, что Webpack уделяет особое внимание модульной разработке, а такие функции, как сжатие файлов, слияние, предварительная обработка и т. д., являются лишь его второстепенными функциями.