Навчіть мене користуватися babel, keeprock
З чого почати
Звичайно ж з установки. Все починається з установки. Зазвичай у більшості все там же і закінчується, але ми то з вами не більшість, а унікальне меншість переходить в більшість.
NPM у нас вже встановлений і ми встановлюємо Babel-CLI:
$ Npm install - save - dev babel - cli
Після цього ми зможемо викликати babel, просто написавши в консолі:
Так просто. Вказуєте потім файл, який ви хочете обробити, а в якості другого параметра вказуєте вихідний файл.
Відступ на тему глобальної установки і локальної установки. У випадку з Babel краще ставити локально. Усе.
Як ваш компілятор дізнається з якого в який формат ви хочете його ганяти. Тут то в справу і в вступають пресети або, як кажуть мої американські друзі, яких у мене до речі практично немає, Presets.
Babel Preset
До речі, кому цікаво, подивіться потім, що робить Babel з ES6 синтаксими, коли переводить його в свій формат. Дітям до 18 краще на цей код не дивитися (дітям взагалі краще на код не дивитися заради збереження їх сталого дитинства).
Задаються preset декількома шляхами:
- У параметрі командного рядка
- У файлі .babelrc
Ми підемо другим способом, щоб зменшити розмір команд, які ми будемо вводити в консоль.
Встановимо наш пресет (ви ж не думали що він йде в комплекті?) Виконавши команду:
висновок
під варту могло статися зі мною, якби я вголос вимовляв всі що думаю про світ веб розробці, але на щастя я цілком нормальна особистість.
Як бачите, використовувати babel дуже просто. Це не прерогатива хлопців з зарплатами + $ 3k і більше. Якщо заглиблюватися далі (а ми з вами обов'язково заглибимося), то можна дуже сильно закапала. Однак, сам факт того, що можна використовувати ES6 вже сьогодні вельми і вельми радісний. (В рамках того що робота стає простіше).
Всім дякую! Це ще один пост, який допоміг вам стати краще і розумніше. Прибрав все обмеження у вашій свідомості і допоміг розкритися. Буду вдячний самому собі якщо напишу ще один десяток, а ви їх прочитаєте.
До зустрічі!
Цікаві блоги про Front-end розробці
Front-end інтерв'ю. завдання 4
Front-end інтерв'ю. завдання 3
Розмови про this. Частина 1