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

Многие гениальные вещи создаются из лени. Системы сборки облегчают жизнь разработчика.

Время чтения: меньше 5 мин

Кратко

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

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

Как понять

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

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

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

        
          
          npm initnpm install parcel
          npm init
npm install parcel

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

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

    <script src="./index.js"></script>
  </body>
</html>

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

        
          
          // index.jsdocument.getElementById("title").innerText = "Hello from JS!"
          // index.js

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

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

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

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

        
          
          npm run dev
          npm run dev

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

На практике

igorkamyshev

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

last 1 version
> 1%

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