skip to main content

Системы сборки

js

Кратко 🔗

Бандлер — программа, которая упаковывает сложный проект со многими файлами и внешними зависимостями в один (иногда несколько) файл, который будет отправлен браузеру.

Самый популярный бандлер — Webpack, он используется в сложных проектах с высокими требованиями к конфигурируемости. Самый простой в использовании — Parcel, он хорошо подходит для небольших проектов без особенных требований.

Как понять 🔗

Современные проекты могут быть огромными (100 тысяч строк или даже больше), писать такие объемы кода в одном файле совершенно невозможно. К тому же, часто нужно использовать готовые библиотеки, которые написал кто-то другой. Но, к сожалению, браузеры не очень хорошо поддерживают проекты из многих файлов. Из-за этого были придуманы системы сборки (их ещё называют бандлерами или сборщиками).

Как пользоваться 🔗

Большинство бандлеров распространяются через npm. Чтобы начать ими пользоваться, достаточно добавить соответствующий пакет.

npm init
npm install parcel-bundler

Теперь нужно создать html-файл, в котором описать относительные пути до JavaScript-файлов, и запустить бандлер. Он сделает всю остальную работу.

<!-- index.html -->
<html>
<head>
<title>Hello, bundler!</title>
<script src="./index.js"></script>
</head>
<body>
<h1 id="title">Hello, bundler!</h1>
</body>
</html>

Рядом с этим файлом следует разместить JavaScript-файл:

// index.js

document.getElementById("title").innerText = "Hello from JS!"

Теперь можно запустить бандлер, и посмотреть на результат в браузере. Для этого нужно добавить новый скрипт в package.json:

{
// ...
"scripts": {
"dev": "parcel index.html"
}
// ...
}

и запустить его:

npm run dev

В браузере будет виден HTML, и исполнится JS. Важно заметить, что в JS-файлах теперь можно безболезненно импортировать любые другие файлы — и локальные, и установленные через npm модули. Бандлер найдёт все нужные файлы и упакует в один большой файл, который отправится в браузер.

В работе 🔗

Обычно бандлеры, кроме сборки кода, умеют применять к нему трансформации. Например, можно писать приложение на современном JavaScript, а бандлер превратит его в понятный для старых браузеров код. Чаще всего, для этой задачи используется Babel. При работе с Parcel Babel включен по умолчанию, и чтобы его настроить, достаточно создать в корне проекта файл .browserslistrc и перечислить в нем поддерживаемые браузеры:

last 1 version
> 1%
IE 11

При такой конфигурации, результирующий код будет корректно работать в последних версиях браузеров, в любых версиях, которые занимают больше 1 процента на рынке браузеров, и в Internet Explorer 11.