Как да конвертирате ES6 в ES5 с помощта на Babel

Направете вашия код ES6 100% браузър поддържа

Значи искате да започнете да използвате ES6, но се притеснявате от поддръжката на браузъра и съвместимостта на вашето приложение назад? Не се притеснявайте, Babel може да ни помогне там.

Babel е транспилатор (превежда код от един език на друг компютърен език на същото ниво на абстракция), който може да превърне нашия ES6 код в ES5. Предполагам, че знаете как да използвате и възел, и npm и да ги инсталирате и двете на вашата машина. Ако нямате, започнете от тук

1. Инсталирайте Babel като Dev зависимост

Първо, първо е да изтеглите интерфейса на командния ред Babel, който ще ни позволи да използваме Babel в нашия терминал. Отворете папката на вашия проект във вашия команден ред и напишете следната команда:

$ npm инсталирате -D babel-cli

2. Напишете ES6 код

Ако вече имате написан ES6 код, тогава сте по-напред от играта. Ако не го направите, направете това сега. Моето предложение би било да съхранявате вашите JavaScript файлове в папка, като src или javascript. Ще направя примерен файл:

// src / example.js
клас Здравейте {
  статичен свят () {
    console.log („Здравей, свят!“);
  }
}
Здравей свят();

3. Инсталирайте env preset и създайте .babelrc файл

Сега, когато имаме нашия JavaScript код, трябва да настроим Babel, за да го преобразуваме за нас. За съжаление, Babel не може да направи много извън полето. За да свършат работата, се нуждаят от подходящи плъгини и предварително зададени групи от приставки.

В нашия случай ще използваме env предварително зададени настройки и ще го инсталираме като dev зависимост във вашия проект.

$ npm install -D babel-preset-env

Сега имаме нужда от нашия .babelrc файл. Подобно на това как npm разчита на package.json, Babel използва .babelrc, за да следи плъгините и предварителните настройки, които ще използваме.

Създайте своя .babelrc файл:

$ touch .babelrc

И напишете следното:

// .babelrc
{
  "предварително зададени настройки": ["env"]
}

4. Създайте команда npm build

Не е необходимо да правите това, но това ще го направи по-бързо и по-лесно, ако трябва да превеждате кода си често.

Отидете до вашия package.json файл, където ще създадем сценарий за изграждане на npm, използвайки командата babel. Командата babel взема два аргумента: пътя към вашия ES6 код и път до мястото, където искате да отиде вашият ES5 код.

Ако всичките ви JavaScript код се съхраняват в директория, тогава можете да добавите флаг -d към командата, за да кажете на Babel да търси директории вместо файлове. За моя пример, аз имам своя JavaScript код в моята src директория, но искам моят ES5 код да бъде поставен в директория за изграждане.

// package.json
...
"скриптове": {
  "build": "babel src -d изграждане",
}
...

5. Изпълнете командата Babel

Създаденият от вас .babelrc файл и вашата команда за изграждане е готова, просто го стартирайте във вашия команден ред.

$ npm run build

Трябва да видите преобразуваните JavaScript файлове в директория за изграждане. Сега всичко, което трябва да направите, е да ги включите / изискате в молбата си и трябва да сте готови!