Це з нагоди останнього Зустріч JS-Star, організований JS-Republic, щоб ми змогли переглянути провідні пакетники JavaScript на даний момент та їх функціональні можливості. Настав час підвести підсумки цих маленьких інструментів, які значно полегшують життя!

Темою цього вечора було управління залежностями від JavaScript у 2016 році, концепція, нерозривно пов’язана з пакувальниками JavaScript. Перше питання, яке виникає тоді, що таке пакувальник і що він дає порівняно з Gulp або Grunt?
За допомогою Gulp або Grunt вам часто доводиться вказувати порядок, у якому ви хочете обробити свої вхідні активи. Наприклад, ви повинні вказати його один раз, щоб об’єднати файли js, інший раз для запуску тестів тощо…
Хоча в кінцевому підсумку ми хотіли б просто сказати, що файл A залежить від файлу B (наприклад, Node.js) і що, надаючи лише «кореневий» файл, наші інструменти достатньо розумні, щоб об’єднати, завантажити залежності або просто запустити тести.
І це місія, яку виконують такі інструменти, як Webpack, JSPM або Rollup.js, які ми мали право (повторно) виявити в трьох найкращих презентаціях!

Різні форми упаковки та Webpack

Ентоні Таксі (@ModuloM) вводить тему, детально пояснюючи різні форми упаковки JavaScript (див. відео нижче). Він розповідає нам про історію Globals та IIFE (вираз функції, що викликається негайно), потім CommonJs, формат Node.js, AMD, спочатку запущеного Require.js, UMD спробу узгодити два попередні, і, нарешті, про майбутнє з модулями ES2015.
У цьому ж відео ви знайдете Ентоні Джіньєрса (@aginiers) дайте нам пояснення для багатьох із нас щодо загадкової конфігурації Webpack !

JSPM

JSPM не залишився осторонь цього вечора завдяки Джордану Гарнету (@ДжоГренат). Грамотно змішавши практичну й академічну презентацію, він зміг представити нам цей інструмент, який мав би вигоду від того, щоб бути відомим. Дивитися !

RollupJS

Нарешті вечір завершився презентацією с RollupJS Матьє Бретон (@MatBreton). Цей маловідомий інструмент призначений як експериментальний проект для просування використання модулів ES6. Цей формат, який стане майбутнім форматом пакету JavaScript в майбутньому, все ще не використовується широко, наприклад, «основні» файли, на які вказують бібліотеки Node.js, які завжди у форматі UMD.

Висновок

На додаток до різних форматів упаковки JS, протягом цього вечора постійно з’являлися два слова: тремтіння дерева
За цим терміном ховається процес видалення мертвого коду (невикористаного коду) у залежностях JavaScript. Результатом є потенційно дуже значне зниження кінцевого результату.
Як приклад JavaScript, який використовує D3.js і який спочатку робить більше ніж 58ko мінімізовані та gzipped можна оновити до 8ko з цим процесом. (Source)
Ви знайдете два фрагменти коду, які дозволять вам краще зрозуміти концепцію. А ми розповідаємо вам у березні на наступну зустріч JS-Star 😉

//-------------
// main.js
import {cube} from './maths.js';
console.log( cube( 5 ) ); // 125
//-------------
// maths.js
export function square ( x ) {
   return x * x;
}
// This function gets included
export function cube ( x ) {
   return x * x * x;
}

function cube ( x ) {
   return x * x * x;
}
console.log( cube( 5 ) ); // 125