Початок роботи з вавилем 7

JavaScript унікальний через широту екосистеми. Незважаючи на те, що нові стандарти додають синтаксичний цукор, отримуючи їх підтримуючи на браузерах, вимагає часу. Вавилон працює навколо цієї проблеми за допомогою автоматичної транспіляції.

Ідея за продуктом є простим: Babel займає код ES6 або ES7 і замінює нові синтаксичні елементи з кодом емуляції. Його вивід підтверджує класичний синтаксис JavaScript і працює на старших браузерах, таких як Internet Explorer.

Початковий випуск Баберуля взяв світ штормом. Незабаром після цього вперше з'явилися різні рамки, такі як реагування, Vue та Ember, обіймаються. Розробники часто використовують продукт, не знаючи, що він працює у фоновому режимі - більше одного популярного проекту NPM має залежність від вавиля.

• Як зробити додаток

Ці залежності перетворювали процес випуску попередника в боротьбу з конфлікту. Версія 7, як і раніше, управляється невеликою командою супроводжувача, таким чином, намагалася бути максимально сумісним. Зміни, що порушують, мало, а якість генерації коду залишається високою (якщо ви працюєте з командою, збереження документів у хмара зберігання допоможе вам залишатися згуртованим).

Якщо ви раніше не працювали з вавилем, нехай це буде вашим керівництвом. Можливість використання додаткових функцій JavaScript без сумільності турботи робить життя набагато простіше.

Ви хотіли б отримати інструменти для оптимізації вашого процесу? Наше керівництво до кращого Веб-будівельник допоможе. Хочете довготривалої підтримки? Отримати право веб хостинг Сервіс.

01. Перевірка версії

Вавилон зазвичай живе в середовищі виконання вузла. Почнемо, перевіряючи, що використовуються версії. Вихід забезпечує стан версії, знайдений на робочій станції Ubuntu 14.04, використовувана для створення наступної статті. Це не педантичність - фігура, що супроводжує цей крок, показує, що команда вавилонської команди знизила підтримку для багатьох версій вузлів.

 Tamhan @ Tamhan-ThinkPad: ~ $ вузол --version
v8.14.0
tamhan @ tamhan-thinkpad: ~ $ npm --version
6.4.1 

02. Зміна назв пакетів

Одна зміна розбиття в версії 7 займається переміщенням пакетів вавилонників у свій власний простір імен. Старі пакети не були вилучені з різних сховищ. Це важливо, оскільки використання спадщини назви пакетів призводить до ситуації, показаної на фігурі, що супроводжує цей крок.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkSpaceB7 $ NPM
install --save-dev @ babel / core @ babel / cli @
Вавилон / preset-env @ babel / вузол
. . .
+ @ babel / core @ 7.2.0
+ @ Babel / Node @ 7.2.0
+ @ babel / cli @ 7.2.0
+ @ babel / preset-env @ 7.2.0 

03. Додайте дію збірки

Крок вище передбачає, що ви працюєте всередині проекту NPM. У цьому випадку, що працює вабаль через дію збірки легко. відчинено package.json і змінити його, як показано в коді нижче:

 {
. . .
"Головна": "index.js",
"Сценарії": {
"Тест": "echo \" Помилка: немає тесту
вказано \ "& amp; & amp; вийти 1",
"build": "babel index.js -d lib"

}, 

04. Передача код вручну

Покласти Вавилон до роботи передбачає вистрілити дію збірки. Це найкраще виконати через команду Run NPM. Точний -д Значення інформує Вавильова, що результати повинні бути розміщені в ліб Папка - фігура, що супроводжує цей крок, показує, що папка створюється на льоту.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkSpaceB7 $ NPM
запустити
& gt; [email protected] build / home / tamhan /
WorkSpaceB7
& gt; babel index.js -d lib
Успішно склав 1 файл з вавилем. 

05. Питання конфігурації

Викликає Вавилон без подальших параметрів конфігурації не дозволяє трансспектива. Код може бути перенесений, лише якщо рамка отримує додаткову інформацію про цільове середовище. Це можна зробити за допомогою параметра командного рядка або створюючи файл під назвою .babelrc У корінні проекту.

06. Налаштуйте babelrc

Вавилон налаштовує себе за допомогою набору плагінів, кожен з яких застосовує транспіляцію, перетворюється на кодову базу. Ми використовуємо пресет-env Пакет - це поставляється з попередньо налаштованим набором перетворень, призначених для покриття більшості основ.

 {
"Представники": ["@ babel / preset-env"]
} 

07. Час для тест-драйву

Додайте трохи javascript javascript до index.js, щоб перевірити програму проти деякого живого коду. Код, що супроводжує цей крок, не буде працювати на застарілих браузерах - коли це зроблено, неявна функція замінюється на a звичайний Декларація, як показано на малюнку.

Функція Tamstest () {
[1, 2, 3] .map ((n) = & gt; n + 1);
} 

08. Відрегулюйте націлювання

пресет-env Застосовує більшість перекладів за замовчуванням: мета продукту полягає у створенні універсального сумісного JavaScript без урахування витрат на пропускну здатність та продуктивність. Ви можете змінити свою конфігурацію, пройшовши в a цілі Об'єкт - приклад нижче цільових конкретних версій хрому і тобто.

 {
"Представники": [
["
"@ babel / preset-env",
{
"Цілі": {
"Chrome": "58",
"IE": "11"
}
}
]
]
} 

09. Розширене націлювання

Орієнтація на веб-переглядач Бабеля не обмежується Chrome та Internet Explorer. Завдяки співпраці з список браузера , розробники можуть змішувати та відповідати більш ніж десятка цілях, як показано нижче.

Імена - нечутливі до регістру:

• Андроїд для веб-перегляду Android.
• Байдарка для браузера Baidu.
• Ожина або бб для браузера BlackBerry.
• Хром для Google Chrome.
• Хромандроїд або and_chr для Chrome для Android.
• Край для Microsoft Edge.
• Електронний для електронної системи. Він буде перетворено в версію Chrome.
• Провідник або тобто для Internet Explorer.
• Розвідний або ie_mob для Internet Explorer Mobile.
• Пожертвування або ff для Mozilla Firefox.
• Firefoxandroid або and_ff Для Firefox для Android.
• ios або ios_saf для iOS Safari.
• Вузол для node.js.opera для опери.
• Опериміні або op_mini для Opera Mini.
• Оперативний або op_mob для оператора Opera.
• Qqandroid або and_qq Для браузера QQ для Android.
• Сафарі для настільних Safari.
• Самсун для Samsung Інтернет.
• Ucandroid або and_uc Для браузера UC для Android.

10. Розширене націлювання, частина двох

Брезерний список також може приймати передові запити. Його домашня сторінка Перераховує параметри конфігурації, майже всі з яких також можуть бути використані всередині Вавилон, змінюючи вапняк . Запит можна оцінити локально, якщо ваша робоча станція встановлена ​​NPX.

 {
"Цілі": "& gt; 0,25%, не мертвих"
} 

11. Автоматична транспіляція

Потрібно закликати Вавильок вручну швидко стає нудним. Утиліта Nodemon Monitors Filesystem Resources та Fires Off Comments як виявлені зміни. У теорії додавання підтримки Nodemon обробляється через невелику зміну package.json .

 {
"Назва": "WorkspaceB7",
. . .
"Головна": "index.js",
"Сценарії":
{
"START": "Nodemon - Excec Babel-Node
index.js ", 

12. Перевірте наявність

Деякі робочі станції мають вузлівник встановлено у всьому світі. Якщо це не так, що викликає програму, отримає повідомлення про помилку, подібне до показаного нижче. На щастя, розгортання вузлівник легко здійснюється через npm встановлення команду.

 Tamhan @ Tamhan-ThinkPad: ~ / WorkSpaceB7 $ NPM
Встановіть - водойм-Dev Nodemon 

13. Перевірте функціональність

Вогонь npm починається У вікні терміналу і перейдіть до змісту вмісту index.js з редактором, як Gedit або Візуальний студійний код . Після збереження, вузлівник буде виведену інформацію про стан.

 [Nodemon] Перезавантаження через зміни ...
[nodemon] починаючи `вави-вузла index.js`
[Nodemon] Чистий вихід - Очікування змін
Перед перезавантаженням 

14. Виправити транспіляцію

Поки вузлівник Виявлення не повинно працювати бездоганно на цьому етапі, вміст index.js файл, що знаходяться в ліб Не оновлюйте. Це викликано чіткості вапляційний вузол - Це не здійснює перенесені файли на диск. Це замість цього випускає модифіковану версію вузла Cli, який працює з перенесеними файлами.

15. Код перенесення програмно

Вавилон не обмежується роботою на командному рядку. Якщо встановлено правильні пакети, код також може бути перенесений з іншої програми. Фрагмент, що супроводжує цей крок, застосовує набір основних перетворень до вхідного рядка. Майте на увазі, що налаштування конфігурації, як правило, отримуються з a вапняк файл.

 Var Babel = вимагає ("@ babel / core");
Імпорт {transform} з "@ babel / core";
Імпорт * Як Вавилон з "@ Babel / Core";
babel.transform ("код ();", варіанти,
Функція (помилка, результат) {
результат.
result.map;
результат.
}); 

16. Перекласти цілі файли

Вихідний код зазвичай не зберігається в рядкових змінних. Вавилонський API для цього за допомогою набору функцій, пов'язаних з файлами, які відмовляються від вхідного рядка для змінної з ім'ям файлу. Результати, однак, повертаються як звичайна змінна JavaScript.

 babel.transformfile ("filename.js", опції,
Функція (помилка, результат) {
результат; // = & gt; {код, карта, ast}
}
) 

17. Синхронізація та асин

Бабель 7 ввів синхронні та асинхронні версії більшості викликів API. Не забудьте вибрати правильний для ваших потреб - під час перенесення малих прикладів можна зробити на льоту, налаштування вабаля вільного на більш складних файлах може легко призвести до затримок, що працюють у десятки секунд.

18. Дізнайтеся про окремі плагіни

Якщо ви коли-небудь вважаєте, що це цікаво, що відбувається у фоновому режимі, просто відвідайте Ця сторінка . Він надає список всіх плагінів, що містяться в розповсюдженні вівчинок, а також містить кілька підказків для всіх тих, хто прагне створити свій плагін.

19. Знімайте специфіку на майно

Вавилон не обмежується перенесенням елементів JavaScript New-Age. Продукт містить функціональний, обмежений машинним двигуном. Він вибирає інформацію та замінює передові елементи. На жаль, Вавилон не виконує перевірку типу - це усуває одну з найбільш значущих переваг мови типівфор.

 {
"Представники": ["@ babel / preset-typescript"]
} 

20. Запустіть Вавилон онлайн

Хоча операції транпіляції зазвичай працюють гладко, іноді відбуваються проблеми. У цьому випадку Вабаля корисно. Він працює Вавилон у браузері вашої робочої станції та показує вхід і виведення поруч один з одним.

21. Дізнайтеся про болю

Наше введення пояснило, що Вавилон бачить широке використання в різних проектах. Команда підтримуючої команди "Бабеля" спрощує оновлення версій з a Детальний журнал змін . Якщо ви використовуєте вабаль, не забудьте проконсультуватися з Посібник з оновлення API .

Ця стаття була опублікована у випуску 283 журналу Creative Web Design Веб-дизайнер . Купити проблему 283 тут або Підписатися на веб-дизайнер тут .

Пов'язані статті:

• Як код швидше, більш світлий JavaScript
• 5 awesome javascript apis
• 27 шаблонів веб-сайту верхнього класу