Инструменты сборки стали необходимым компонентом рабочего процесса для современных веб-приложений. Ранее я рассмотрел основы того, что инструменты сборки могут для вас сделать, чтобы показать, как сборки помогают в написании сценариев, автоматизации и устранении сложности. Принимая это во внимание, я собираюсь более подробно рассмотреть некоторые из наиболее популярных инструментов сборки и то, как они могут иметь смысл для ваших проектов.
Этот пост не является исчерпывающим списком. Скорее, он предназначен для предоставления предложений, которые помогут вам начать изучение того, как различные инструменты сборки улучшают рабочий процесс разработки. Читая это сравнение инструментов сборки, вы получите некоторые знания, которые помогут лучше подготовиться к сравнению того, как эти инструменты соответствуют вашим конкретным потребностям.
Что мы снова сравниваем?
В этом руководстве будут рассмотрены только инструменты сборки, которые могут выполнять объединение модулей проекта, то есть процесс объединения динамического содержимого в модули и пакетов в файлы статических ресурсов. Этот процесс можно улучшить с помощью сценариев, автоматизации и минификации. Не все инструменты сборки одинаковы, и не все инструменты сборки могут выполнять все вышеперечисленное. Некоторые инструменты требуют дополнительной настройки, а некоторые представляют собой готовые решения, которые делают большую часть того, что вам нужно, из коробки.
Скорее всего, у вас возникнет (или разовьется) предпочтение в отношении того, насколько вы хотите, чтобы инструмент сборки делал. Таким образом, вместо того, чтобы выбирать один инструмент сборки для управления ими, в этом посте будут рассмотрены преимущества, подводные камни и идеальный профиль проекта для каждого инструмента.
Просматривать
Преимущество: Сногсшибательная простота
Уловка: разработка проекта сильно замедлилась.
Идеальный проект: проекты, которые стремятся избавиться от интенсивного использования тегов скриптов и переместить, вместо этого требует CommonJS.
Browserify фокусируется на простоте начала работы, и это отличное введение в объединение модулей при разработке JavaScript. Изначально Browserify возник как способ позволить разработчикам интерфейса использовать CommonJS (операторы require) в браузере точно так же, как в приложении node серверного рендеринга. Раньше веб-разработка использовала несколько тегов сценариев на странице для создания современных веб-приложений. Этот инструмент просматривает все ваши файлы JavaScript в объединенный (объединенный и объединенный) файл, который можно легко включить на страницу как один тег скрипта.
Использование Browserify начинается с установки интерфейса командной строки. Я рекомендую использовать npm из командной строки.
npm install browserify
После установки вы можете указать в своей точке входа JavaScript вашего приложения (скорее всего, в index.js) место для запуска процесса Browserifying.
browserify index.js > bundle.js
Результатом является связанная версия вашего JavaScript, которую можно включить в ваш index.html.
<script src=”bundle.js”></script>
Реализация Browserify является полной и ориентирована на улучшения JavaScript "из коробки". Для поддержки объединения ресурсов, не относящихся к JavaScript, таких как CSS или изображения, существует созданный сообществом здоровый список преобразований (все названы с неопределенными окончаниями, насколько умно) для источников этих решений. Я большой поклонник привлечения сообщества разработчиков открытого исходного кода к дальнейшему развитию проекта, но если вы хотите попробовать Browserify, обратите внимание: некоторые преобразования не получали обновлений более шести месяцев. При этом есть много областей, в которых можно внести свой вклад в сообщество, предоставляя плагины для решений вашего проекта.
В отличие от некоторых других инструментов сборки, Browserify не поддерживает стандартный файл конфигурации. однако вы можете использовать узел package.json для обработки более сложных конфигураций. Работа Browserify определяется плагинами и содержимым ваших файлов JavaScript. Для проектов, которые не нужно постоянно обновлять, это может быть прекрасной вещью. Для проектов, нуждающихся в большом количестве инструментов и оптимизаций, отсутствующий файл конфигурации может стать обузой, потому что нет источника правды или места, где можно было бы разоблачить колдовство инструмента сборки.
Обратитесь к документации Browserify, а также к списку преобразований, чтобы увидеть, что он включает в себя все, что вам нужно, чтобы сделать ваш рабочий процесс разработки счастливым. Вы также можете использовать это руководство о том, как создать приложение React с помощью Browserify, чтобы увидеть его в действии. Если вам нужно просто, то Browserify - это то, что я рассмотрю для вашего следующего проекта.
Webpack
Преимущество: активно поддерживаемый проект с множеством готовых функций
Уловка: требуется немного индивидуальной конфигурации, чтобы все получилось.
Идеальный проект: проекты, которые хотят быть в курсе последних и лучших изменения. Проекты, которые также стремятся выполнить разделение кода, также должны рассмотреть возможность использования веб-пакета.
Webpack - это инструмент сборки, который основан на 4 основных концепциях: Entry, Output, Plugins и Loaders. Как только вы поймете идеи, связанные с этими концепциями, вы сможете запустить Webpack и запустить проект. Webpack может показаться похожим на Browserify в некотором смысле с расширенными функциями через сообщество плагинов. Webpack, однако, имеет больше функций из коробки, и мы планируем продолжать добавлять больше и постоянно переосмысливать дизайн проекта.
Ранее я писал руководство по началу работы с [Webpack с нуля] (https://www.netlify.com/blog/2017/11/30/starting-with-webpack-from-scratch/), и на нем основное внимание уделяется об использовании интерфейса командной строки Webpack для создания приложения React. Webpack требует, чтобы вы создали отдельный файл конфигурации для поддержки ваших усилий по сборке Webpack. Этот файл представляет собой не что иное, как объект JavaScript, который Webpack использует для включения и отключения функций во время процесса сборки на основе ключей и значений в объекте конфигурации.
// example of a webpack.config.js
module.exports = {
entry:’./index.js’,
output: {
filename: ‘bundle.js’
}
В конфигурации вы можете определить точку входа вашего проекта, а также место, где вы хотите разместить свой пакет. Это упрощает запуск сборки Webpack, поскольку вам не нужно запоминать определенные команды, вы просто `webpack` для создания вашей сборки.
npm install webpack webpack
Конфигурация Webpack может быть прекрасным подходом к добавлению новых функций и инструментов для улучшения процесса сборки, но, как и в большинстве других приятных вещей, несколько добавлений здесь и там могут привести к тому, что ваша конфигурация раздувается до неуправляемой формы. Конфигурация, которая выглядит неуправляемой, может быть формой, в которой группа разработчиков проекта избегает изменения или обновления конфигурации Webpack, опасаясь нарушить сборку из-за того, что в конфигурационный файл Webpack добавлено слишком много.
Команда React решила эту проблему с Webpack, абстрагировав конфигурацию в скрытом скрипте под инструментом CLI create-react-app. Если вы посмотрите на скрытую конфигурацию, в файле есть одни из лучших комментариев, которые вы, возможно, когда-либо видели в конфигурации, но тот факт, что для этого нужно так много комментариев, заставляет вас сомневаться, есть ли лучший способ иметь такую тонко настроенную конфигурацию без необходимых стен комментариев для поддержки каждого решения.
// excerpt from the creat-react-app's webpack config
module.exports = {
// You may want 'eval' instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
devtool: 'cheap-module-source-map',
// These are the "entry points" to our application.
// This means they will be the "root" imports that are included in JS bundle.
// The first two entry points enable "hot" CSS and auto-refreshes for JS.
entry: [
// We ship a few polyfills by default:
require.resolve('./polyfills'),
// Include an alternative client for WebpackDevServer. A client's job is to
// connect to WebpackDevServer by a socket and get notified about changes.
// When you save a file, the client will either apply hot updates (in case
// of CSS changes), or refresh the page (in case of JS changes). When you
// make a syntax error, this client will display a syntax error overlay.
// Note: instead of the default WebpackDevServer client, we use a custom one
// to bring better experience for Create React App users. You can replace
// the line below with these two lines if you prefer the stock client:
// require.resolve('webpack-dev-server/client') + '?/',
// require.resolve('webpack/hot/dev-server'),
require.resolve('react-dev-utils/webpackHotDevClient'),
// Finally, this is your app's code:
paths.appIndexJs,
// We include the app code last so that if there is a runtime error during
// initialization, it doesn't blow up the WebpackDevServer client, and
// changing JS code would still trigger a refresh.
],
output: {
// Add /* filename */ comments to generated require()s in the output.
pathinfo: true,
// This does not produce a real file. It's just the virtual path that is
// served by WebpackDevServer in development. This is the JS bundle
// containing code from all our entry points, and the Webpack runtime.
filename: 'static/js/bundle.js',
// There are also additional JS chunk files if you use code splitting.
chunkFilename: 'static/js/[name].chunk.js',
// This is the URL that app is served from. We use "/" in development.
publicPath: publicPath,
// Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info =>
path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
},
// ... there is so much more to thisКоманда Webpack активно развивает этот проект и вносит свой вклад в устранение путаницы, связанной с конфигурацией. Многие из недостающих функций, которые когда-то требовали подключаемого модуля Webpack, теперь включены в саму библиотеку, в том числе поддержка древовидной структуры, искажения и даже поддержки веб-сборки (WASM). Хорошо написанная документация также помогает сделать этот Webpack как инструмент сборки более доступным и постоянно поддерживается с момента запуска Webpack 2 (осень 2016 г.).
Webpack не только сосредоточен на объединении модулей, он включает в себя разделение кода в качестве встроенной функции. Разделение кода - это практика загрузки только необходимого контента, когда это необходимо, с использованием отдельных пакетов разделения страниц, обычно основанных на маршрутизации. Это потенциально может улучшить скорость загрузки страницы и общее впечатление от просмотра. Разделение кода, тем не менее, имеет кривую обучения, которую я лично не полностью изучил, но члены команды Webpack изо всех сил стараются сгладить эту кривую с помощью webpack.academy.
Существует множество шаблонов конфигурации Webpack, созданных сообществом, в том числе довольно интересный инструмент под названием Webpackbin. Webpackbin - это песочница для создания и настройки примеров Webpack. Отсюда вы можете генерировать ссылки, что удобно при исследовании конфигураций Webpack, поскольку авторы обычно публикуют свои конфигурации в песочнице и предоставляют URL-адрес для совместного использования.
Webpack работает над тем, чтобы батареи были включены, но некоторые части инструмента для сборки продаются отдельно. Webpack может справиться почти со всеми проблемами, которые у вас возникают при создании веб-приложений в наши дни, но вам также, вероятно, придется много читать руководство (документацию), чтобы настроить и запустить его по своему вкусу.
Свернуть
Преимущество: встроенные функции для управления пакетами
Уловка: вам нужно убедиться, что в вашем проекте реализован синтаксис ES6.
Идеальный проект: проекты, которые хотят использовать немного меньшую конфигурацию для процесса сборки и уже с использованием новейших функций ESNext, таких как модули ES
Rollup - это сборщик модулей для JavaScript, который компилирует небольшие фрагменты кода в нечто большее и более сложное. Он использует новую версию модульной системы JavaScript ES6 вместо предыдущих идиосинкразических решений, таких как CommonJS и AMD, для выполнения объединения (объединения) вашего проекта. Модули ES6 позволяют свободно и легко комбинировать наиболее полезные отдельные функции из ваших любимых библиотек.
Приступить к работе с Rollup можно через командную строку. Просто укажите свой index.js и укажите имя для связанного вывода.
npm install -D rollup rollup index.js — o bundle.js — f iife
Чтобы избавить нас от необходимости постоянно повторять одни и те же команды, у вас есть возможность добавить файл rollup.config.js, аналогичный тому, что мы видели в webpack. Те же риски, связанные с конфигурацией, действуют и в ght ejs.
// rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'bundle.js',
format: ‘cjs’
};
Rollup приобрел большую популярность среди разработчиков пакетов и с открытым исходным кодом из-за встроенных функций для управления пакетами, в отличие от веб-приложений. Некоторые из функций отражают то, что вы могли бы сделать с Universal Module Definition (UMD), и делают Rollup отличным мостом между UMD-потребностями JavaScript и модулями ES6. Поскольку ES6 очень популярен, Rollup не работает с необходимыми файлами CommonJS без плагина. Это ограничение только для старых проектов, которые еще не реализовали синтаксис ES6 в своем рабочем процессе. Однако, если вы начинаете новый проект, для вас не так много ограничений.
По состоянию на весну 2017 года все основные браузеры изначально поддерживают модули ES6, и теперь Rollup также претендует на новое конкурентное преимущество. Rollup действительно имеет встроенную поддержку, встроенную поддержку для tree shaking, с возможностью удаления неиспользуемого кода из пакета вашего проекта, что вы можете увидеть в этом примере из rollup repl. Это ценно для проектов, которым нужна помощь, где они могут получить ее с оптимизацией страницы.
Хотя встряхивание дерева кажется мелочью, рассмотрите такие проекты, как Momentjs или lodash, которые для начала являются масштабными. Встряхивание дерева дает возможность исключить все части библиотеки из вашего пакета и включить только ту часть библиотеки, которую вы используете.
Вы можете объединить гораздо больше, чем деревья, поэтому я рекомендую вам обратиться к Руководствам по объединению для дополнительной информации о том, как вы можете использовать встряхивание деревьев и другие функции в своем следующем проекте.
Посылка
Преимущество: не требуется никаких конфигураций.
Уловка: новый проект с меньшим количеством справочной документации.
Идеальный проект: небольшие проекты и прототипы, которым нужно быстро приступить к работе.
Parcel вышел в конце 2017 года и получил привилегию обернуть все точки усталости от конфигурации JavaScript в крошечный пакет. Parcel устраняет сложность инструментов сборки и сразу работает с наиболее популярными плагинами в области JavaScript, включая преобразования babel.
Как и в случае с Browserify, здесь также нет файла конфигурации, но также нет плагинов для конкретных Parcel. Parcel полагается на существующие проекты экосистемы JavaScript, такие как Babel, для выполнения своей работы. Parcel - это только оркестратор. Вы также можете включить преобразования и плагины Babel в свой package.json или .babelrc, и Parcel будет знать, как включить их в процесс сборки. Никакой дополнительной настройки не требуется, что является очень интересной функцией. Также нет необходимости изучать еще одну библиотеку для поддержки вашего проекта (также известная как страшная усталость от JavaScript).
Начало работы с Parcel аналогично другим, но вместо предоставления входных и выходных данных для пакета вы просто указываете запись в скрипте.
npm install parcel-bundler parcel build index.js
Любые другие функции можно найти в документации, но они требуют написания современного JavaScript для этого. Под капотом этого проекта действительно нет никакой магии. Взгляните на этот пример запуска приложения React с использованием Parcel. Как уже упоминалось, этот проект все еще довольно новый, но кажется многообещающим. Уже есть отличная документация и
Микробандл
Преимущество: требуется нулевая конфигурация и очень мало места.
Уловка: новый проект с меньшим количеством справочной документации.
Идеальный проект: проект с учетом размера, который можно использовать как плагин или надстройку для других проектов.
Если вы не слышали о Parcel, возможно, вы не слышали о Microbundle, сборщике с нулевой конфигурацией для крошечных модулей. Microbundle работает на основе вышеупомянутого проекта Rollup и стремится вывести свои модули на новый уровень, удалив этап настройки. Подобно Parcel, он объединит ваш проект, используя только package.json. Поэтому не забудьте включить все необходимые зависимости, необходимые для запуска вашего JavaScript и объединения ваших ресурсов.
npm install microbundle microbundle
Microbundle предполагает, что у вас есть index.js, если в качестве опции не указана точка входа. Он также создаст пакет и уменьшит тот же файл, если также не будет предоставлен вывод. Создается не только связанная версия, но и UMD-версия также предоставляется как часть процесса объединения.
// index.js
function () {
console.log(“Hello World”)
}
// microbundled into index.m.js
function O(){console.log(“FOOOOOOOOOO”)}O();
// microbundled into index.umd.js
!function(e,n){“object”==typeof exports&&”undefined”!=typeof module? n():”function”==typeof define&&define.amd?define(n):n()}(0,function(){console.log(“FOOOOOOOOOO”)});
Это может быть полезно для встраивания небольших совместно используемых проектов в другие. Благодаря этому сообщению я только сейчас обнаружил этот Microbundle, но увидел, что он полезен для Netlify Identity Widget, который представляет собой проект, предназначенный для встраивания в более крупные проекты и уже вручную связанный с UMD.
А теперь иди и построй что-нибудь
Независимо от вашего стиля программирования, для вас есть решение, и выбор инструмента сборки зависит от того, какой тип управления вы хотите. Моя попытка заключалась в том, чтобы перейти от конфигурации без конфигурации к конфигурации партии. Несмотря на количество вариантов, все инструменты сборки работают с Netlify и могут быть полезной частью поддержки вашего приложения, поэтому попробуйте несколько и посмотрите, какой из них вам подходит.
Если вы большой поклонник инструмента, которого здесь нет, оставьте комментарий и дайте мне знать.
