BabelJS - Краткое руководство

BabelJSэто транспилятор JavaScript, который переносит новые функции в старый стандарт. Благодаря этому функции могут без проблем работать как в старых, так и в новых браузерах. Австралийский разработчик Себастьян Маккензи создал BabelJS.

Почему именно BabelJS?

JavaScript - это язык, который понимает браузер. Мы используем разные браузеры для запуска наших приложений - Chrome, Firefox, Internet Explorer, Microsoft Edge, Opera, браузер UC и т. Д. ECMA Script - это спецификация языка JavaScript; ECMA Script 2015 ES6 - это стабильная версия, которая отлично работает во всех новых и старых браузерах.

После ES5 у нас были ES6, ES7 и ES8. ES6 выпущен с множеством новых функций, которые не полностью поддерживаются всеми браузерами. То же самое относится к ES7, ES8 и ESNext (следующая версия сценария ECMA). Сейчас неясно, когда все браузеры будут совместимы со всеми выпущенными версиями ES.

Если мы планируем использовать функции ES6, ES7 или ES8 для написания нашего кода, он будет иметь тенденцию ломаться в некоторых старых браузерах из-за отсутствия поддержки новых изменений. Поэтому, если мы хотим использовать новые функции сценария ECMA в нашем коде и хотим запускать его во всех возможных доступных браузерах, нам нужен инструмент, который скомпилирует наш окончательный код в ES5.

Babelделает то же самое и называется транспилятором, который переносит код в нужную нам версию сценария ECMA. Он имеет такие функции, как пресеты и плагины, которые настраивают версию ECMA, которая нам нужна для транспиляции нашего кода. С помощью Babel разработчики могут писать свой код, используя новые функции JavaScript. Пользователи могут передавать коды с помощью Babel; впоследствии коды можно без проблем использовать в любых браузерах.

The following table lists down the features available in ES6, ES7 and ES8 −

Особенности	Версия скрипта ECMA
Пусть + Const	ES6
Стрелочные функции	ES6
Классы	ES6
Обещания	ES6
Генераторы	ES6
Итераторы	ES6
Модули	ES6
Разрушение	ES6
Шаблонные литералы	ES6
Улучшенный объект	ES6
Свойства по умолчанию, отдыха и спреда	ES6
Асинхронный - Ожидание	ES7
Оператор возведения в степень	ES7
Array.prototype.includes ()	ES7
Заполнение строк	ES8

BabelJS управляет следующими двумя частями -

• transpiling
• polyfilling

Что такое Babel-Transpiler?

Babel-transpiler преобразует синтаксис современного JavaScript в форму, которую могут легко понять старые браузеры. Например, функция стрелки, константа, классы let будут преобразованы в функцию, переменную и т. Д. Здесь синтаксис, т. Е. Стрелочная функция, преобразуется в обычную функцию, сохраняя функциональность одинаковой в обоих случаях.

Что такое Babel-polyfill?

В JavaScript добавлены новые функции, такие как обещания, карты и включения. Возможности можно использовать в массиве; то же самое при использовании и переносе с помощью babel не будет преобразовано. Если новая функция - это метод или объект, нам нужно использовать Babel-polyfill вместе с транспилированием, чтобы заставить его работать в старых браузерах.

Вот список функций сценария ECMA, доступных в JavaScript, которые можно транслировать и полифилить:

• Classes
• Decorators
• Const
• Modules
• Destructing
• Параметры по умолчанию
• Вычисляемые имена свойств
• Остаток / распространение объекта
• Асинхронные функции
• Стрелочные функции
• Остальные параметры
• Spread
• Шаблонные литералы

ECMA Script features that can be polyfilled −

• Promises
• Map
• Set
• Symbol
• Weakmap
• Weakset
• includess
• Array.from, Array.of, Array # find, Array.buffer, Array # findIndex
• Object.assign,Object.entries,Object.values

Особенности BabelJS

В этом разделе мы узнаем о различных функциях BabelJS. Ниже приведены наиболее важные основные функции BabelJS:

Babel-плагины

Плагины и предустановки - это детали конфигурации Babel для транспиляции кода. Babel поддерживает ряд плагинов, которые можно использовать по отдельности, если мы знаем среду, в которой будет выполняться код.

Babel-пресеты

Пресеты Babel - это набор плагинов, т. Е. Подробностей конфигурации babel-transpiler, которые инструктируют Babel выполнять транспилирование в определенном режиме. Нам нужно использовать предустановки, в которых есть среда, в которой мы хотим преобразовать код. Например, предустановка es2015 преобразует код в es5 .

Babel-Polyfills

Есть некоторые функции, такие как методы и объекты, которые нельзя передать. В таких случаях мы можем использовать babel-polyfill для облегчения использования функций в любом браузере. Давайте рассмотрим пример обещаний; чтобы эта функция работала в старых браузерах, нам нужно использовать полифиллы.

Babel-Polyfills

Babel-cli поставляется с набором команд, код которых можно легко скомпилировать в командной строке. Он также имеет такие функции, как плагины и предустановки, которые можно использовать вместе с командой, что упрощает перенос кода за один раз.

Преимущества использования BabelJS

В этом разделе мы узнаем о различных преимуществах, связанных с использованием BabelJS -

• BabelJS обеспечивает обратную совместимость со всеми недавно добавленными функциями JavaScript и может использоваться в любых браузерах.

• BabelJS имеет возможность транспиляции для использования следующей версии JavaScript - ES6, ES7, ESNext и т. Д.

• BabelJS можно использовать вместе с gulp, webpack, flow, response, typescript и т. Д., Что делает его очень мощным и может использоваться с большим проектом, облегчая жизнь разработчика.

• BabelJS также работает вместе с синтаксисом React JSX и может быть скомпилирован в форме JSX.

• BabelJS поддерживает плагины, полифилы, babel-cli, что упрощает работу с большими проектами.

Недостатки использования BabelJS

В этом разделе мы узнаем о различных недостатках использования BabelJS -

• Код BabelJS изменяет синтаксис во время транспиляции, что затрудняет понимание кода при выпуске в производство.

• Транспортированный код больше по размеру по сравнению с исходным кодом.

• Не все ES6 / 7/8 или предстоящие новые функции могут быть перенесены, и мы должны использовать polyfill, чтобы он работал в старых браузерах.

Вот официальный сайт babeljs https://babeljs.io/.

В этом разделе мы узнаем, как настроить среду для BabelJS.

Для работы с BabelJS нам потребуется следующая настройка -

• NodeJS
• Npm
• Babel-CLI
• Babel-Preset
• IDE для написания кода

NodeJS

Чтобы проверить, установлен ли nodejs в вашей системе, введите node –vв терминале. Это поможет вам увидеть версию nodejs, установленную в настоящее время в вашей системе.

Если он ничего не печатает, установите nodejs в свою систему. Чтобы установить nodejs, перейдите на домашнюю страницуhttps://nodejs.org/en/download/ из nodejs и установите пакет на основе вашей ОС.

На следующем снимке экрана показана страница загрузки nodejs -

В зависимости от вашей ОС установите необходимый пакет. После установки nodejs вместе с ним будет установлен npm. Чтобы проверить, установлен ли npm, введитеnpm –vв терминале. Он должен отображать версию файла npm.

Babel поставляется со встроенным интерфейсом командной строки, который можно использовать для компиляции кода.

Создайте каталог, в котором вы будете работать. Здесь мы создали каталог с именем babelproject . Давайте использовать nodejs для создания деталей проекта.

Мы использовали npm init для создания проекта, как показано ниже -

Вот созданная нами структура проекта.

Теперь для работы с Babel нам нужно установить Babel cli, пресет Babel, ядро ​​Babel, как показано ниже -

Babel-Cli

Выполните следующую команду, чтобы установить babel-cli -

npm install --save-dev babel-cli

babel-preset

Выполните следующую команду, чтобы установить babel-preset -

npm install --save-dev babel-preset-env

вавилон

Выполните следующую команду для установки babel-core -

npm install --save-dev babel-core

После установки подробности доступны в package.json -

Мы установили плагины babel локально для проекта. Это сделано для того, чтобы мы могли использовать babel по-разному в наших проектах в зависимости от требований проекта, а также различных версий babeljs. Package.json предоставляет сведения о версии используемых babeljs.

Чтобы использовать babel в нашем проекте, нам нужно указать то же самое в package.json следующим образом:

Babel в основном используется для компиляции кода JavaScript, который будет иметь обратную совместимость. Теперь мы напишем наш код в ES6 -> ES5 или ES7 -> ES5, а также в ES7-> ES6 и т. Д.

Чтобы предоставить инструкции Babel на то же самое, во время выполнения нам нужно создать файл с именем .babelrc в корневой папке. Он содержит объект json с деталями предустановок, как показано ниже -

Мы создадим файл JavaScript index.js и скомпилируем его в es2015 с помощью Babel. Перед этим нам нужно установить пресет es2015 следующим образом:

В index.js мы создали функцию, использующую функцию стрелки, которая является новой функцией, добавленной в es6. Используя Babel, мы скомпилируем код в es5.

Для выполнения на es2015 используется следующая команда -

npx babel index.js

Вывод

Он отображает код index.js в es5, как показано выше.

Мы можем сохранить вывод в файле, выполнив команду, как показано ниже -

npx babel index.js --out-file index_es5.js

Вывод

Вот созданный нами файл index_es5.js -

BabelJS- это транспилятор JavaScript, который преобразует новые функции, добавленные в JavaScript, в ES5 или реагирует в зависимости от заданного пресета или плагина. ES5 - одна из старейших форм JavaScript, которая поддерживается для работы в новых и старых браузерах без каких-либо проблем. В большинстве примеров в этом руководстве мы перенесли код на ES5.

Мы видели много функций, таких как стрелочные функции, классы, обещания, генераторы, асинхронные функции и т. Д., Добавленные в ES6, ES7 и ES8. Когда какие-либо из недавно добавленных функций используются в старых браузерах, возникают ошибки. BabelJS помогает в компиляции кода, который обратно совместим со старыми браузерами. Мы видели, что ES5 отлично работает в старых браузерах без каких-либо проблем. Итак, учитывая детали среды проекта, если требуется, чтобы он работал в старых браузерах, мы можем использовать любую новую функцию в нашем проекте и скомпилировать код для ES5 с помощью babeljs и без проблем использовать его в любых браузерах.

Давайте рассмотрим следующий пример, чтобы понять это.

пример

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index.js"></script>
   </body>
</html>

index.js файл

var _foo = () => {
   return "Hello World"
};

alert(_foo());

Вывод

Когда мы запускаем указанный выше html в браузере Chrome, мы получаем следующий вывод:

Когда HTML запускается в Firefox, он генерирует следующий вывод:

И когда тот же HTML запускается в Internet Explorer, он генерирует следующую синтаксическую ошибку:

Мы использовали функцию ES6 Arrow; то же самое работает не во всех браузерах, как показано выше. Чтобы это работало, у нас есть BabelJS для компиляции кода в ES5 и использования его во всех браузерах.

Скомпилируем файл js в es5 с помощью babeljs и снова проверим в браузерах.

В html файле мы будем использовать index_new.js, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script type="text/javascript" src="index_new.js"></script>
   </body>
</html>

index_new.js

"use strict";

var _foo = function _foo() {
   return "Hello World";
};

alert(_foo());

Выход Chrome

Вывод браузера Firefox

Вывод браузера IE

В этой главе мы увидим, как использовать babeljs внутри нашего проекта. Мы создадим проект с использованием nodejs и будем использовать локальный http-сервер для тестирования нашего проекта.

Создать настройку проекта

В этом разделе мы узнаем, как создать настройку проекта.

Создайте новый каталог и выполните следующую команду, чтобы создать проект -

npm init

Вывод

После выполнения вышеуказанная команда генерирует следующий вывод:

Ниже приводится созданный package.json -

Мы установим пакеты, необходимые для начала работы с babeljs. Мы выполним следующую команду, чтобы установить babel-cli, babel-core, babel-preset-es2015 .

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Вывод

После выполнения вышеуказанная команда генерирует следующий вывод:

Package.json обновляется следующим образом -

Нам нужен http-сервер для тестирования файла js. Выполните следующую команду для установки http-сервера -

npm install lite-server --save-dev

Мы добавили следующие детали в package.json -

В сценариях Babel заботится о переносе scripts.js из папки src и сохраняет его в папке dev с именем scripts.bundle.js . Мы добавили полную команду для компиляции нужного кода в package.json. Кроме того, добавлена сборка, которая запустит lite-сервер для проверки изменений.

В src / scripts.js есть следующий JavaScript-код:

class Student {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

Мы вызвали транспилированный скрипт в index.html следующим образом:

<html>
   lt;head></head>
   <body>
      <script type="text/javascript" src="dev/scripts.bundle.js?a=11"></script>
      <h1 id="displayname"></h1>
      <script type="text/javascript">
         var a = new Student("Siya", "Kapoor", "15", "Mumbai");
         var studentdet = a.fullname;
         document.getElementById("displayname").innerHTML = studentdet;
      </script>
   </body>
</html>

Нам нужно запустить следующую команду, которая вызовет babel и скомпилирует код. Команда вызовет Babel из package.json -

npm run babel

Scripts.bundle.js - это новый файл js, созданный в папке dev -

Выход dev/scripts.bundle.js выглядит следующим образом -

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor); 
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor; 
   };
}();

function _classCallCheck(instance, Constructor) { 
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Student = function () {
   function Student(fname, lname, age, address) {
      _classCallCheck(this, Student);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Student, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Student;
}();

Теперь давайте запустим следующую команду, чтобы запустить сервер -

npm run build

Когда команда запускается, она откроет URL-адрес в браузере -

Вывод

Приведенная выше команда генерирует следующий вывод -

Вышла последняя версия Babel 7 с изменениями в уже существующих пакетах. Часть установки остается такой же, как и для Babel 6. Единственная разница в Babel 7 заключается в том, что все пакеты должны быть установлены с@babel/, например @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill и т. д.

Вот настройка проекта, созданная с помощью babel 7.

Команда

Выполните следующую команду, чтобы начать настройку проекта -

npm init

Установите следующие пакеты

npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

Вот созданный package.json -

Теперь создадим .babelrc файл в корневой папке -

Создать папку src/ и добавить файл main.js к нему и напишите свой код для переноса в es5.

src / main.js

let add = (a,b) => {
   return a+b;
}

команда транспилировать

npx babel src/main.js --out-file main_es5.js

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

Работа Babel 7 остается такой же, как и Babel 6. Единственное отличие - это установка pacakge с @babel.

В babel 7 есть несколько устаревших пресетов. Список следующий:

• Пресеты ES20xx
• babel-preset-env
• babel-preset-latest
• Сценические пресеты в Babel

Также год из пакетов удален - @babel/plugin-transform-es2015-classes сейчас @babel/plugin-transform-classes

Мы увидим еще один пример работы с машинописным текстом и перенесем его в JavaScript Es2015 с использованием предустановки машинописного текста и babel 7.

Для работы с машинописным текстом нам нужно установить пакет машинописного текста следующим образом:

npm install --save-dev @babel/preset-typescript

Создайте test.ts файл в src/ папку и напишите код в машинописном виде -

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

.babelrc

команда

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");

В этой главе мы увидим функции, добавленные в ES6. Мы также узнаем, как скомпилировать функции для ES5 с помощью BabelJS.

Ниже приведены различные функции ES6, которые мы обсудим в этой главе.

• Пусть + Const
• Стрелочные функции
• Classes
• Promises
• Generators
• Destructuring
• Iterators
• Шаблон Literalst
• Улучшенный объект
• Свойства по умолчанию, отдыха и спреда

Пусть + Const

Let объявляет локальную переменную области блока в JavaScript. Рассмотрим следующий пример, чтобы понять использование let.

пример

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

Вывод

2
1

Причина, по которой первая консоль печатает 2, состоит в том, что a объявляется снова с использованием let и будет доступен только в ifблок. Любая переменная, объявленная с помощью let, доступна только в объявленном блоке. Мы дважды объявляли переменную a, используя let, но она не перезаписывает значение a.

В этом разница между ключевыми словами var и let. Когда вы объявляете переменную с помощью var, переменная будет доступна в рамках функции или, если объявлена, будет действовать как глобальная переменная.

Если переменная объявлена ​​с помощью let, переменная доступна в области видимости блока. Если он объявлен внутри оператора if, он будет доступен только внутри блока if. То же самое относится к switch, for-loop и т. Д.

Теперь мы увидим преобразование кода в ES5 с помощью babeljs.

Давайте запустим следующую команду, чтобы преобразовать код -

npx babel let.js --out-file let_es5.js

Вывод от es6 до es5 для ключевого слова let следующий:

Пусть использует ES6

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

Транспортировано с помощью babel в ES5

"use strict";

var a = 1;
if (a == 1) {
   var _a = 2;
   console.log(_a);
}
console.log(a);

Если вы видите код ES5, ключевое слово let заменяется на varключевое слово. Также переменная внутри блока if переименована в_a иметь тот же эффект, что и при объявлении с let ключевое слово.

Const

В этом разделе мы узнаем о работе ключевого слова const в ES6 и ES5. Ключевое слово Const также доступно в области видимости; а если снаружи, то выдаст ошибку. Значение объявленной переменной const нельзя изменить после назначения. Давайте рассмотрим следующий пример, чтобы понять, как используется ключевое слово const.

пример

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

Вывод

Uncaught ReferenceError: age is not defined at 
      
       :5:13 
      

Приведенный выше вывод вызывает ошибку, поскольку возраст константы определяется внутри блока if и доступен в блоке if.

Разберемся с переходом на ES5 с помощью BabelJS.

ES6

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

Команда

npx babel const.js --out-file const_es5.js

Транспортировано на ES6 с помощью BabelJS

"use strict";

var a = 1;
if (a == 1) {
   var _age = 10;
}
console.log(age);

В случае ES5 ключевое слово const заменяется ключевым словом var, как показано выше.

Стрелочные функции

Функция стрелки имеет более короткий синтаксис по сравнению с выражением переменной. ее также называют функцией жирной стрелки или лямбда-функцией. У функции нет собственного свойства this. В этой функции ключевое слово function опущено.

пример

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

Вывод

9

Используя BabelJS, мы перенесем приведенный выше код в ES5.

ES6 - функция стрелки

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

Команда

npx babel arrowfunction.js --out-file arrowfunction_es5.js

BabelJS - ES5

Используя Babel, стрелочная функция преобразуется в функцию выражения переменной, как показано ниже.

"use strict";

var add = function add(x, y) {
   return x + y;
};

var k = add(3, 6);
console.log(k);

Классы

ES6 поставляется с новой функцией классов. Классы похожи на наследование на основе прототипов, доступное в ES5. Ключевое слово class используется для определения класса. Классы подобны специальным функциям и имеют сходство с выражением функций. У него есть конструктор, который вызывается внутри класса.

пример

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Вывод

Siya-Kapoor

ES6 - Классы

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Команда

npx babel class.js --out-file class_es5.js

BabelJS - ES5

С помощью babeljs добавлен дополнительный код, чтобы функциональность классов работала так же, как в ES5 .abelJs гарантирует, что функциональность работает так же, как в ES6.

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Обещания

Обещания JavaScript используются для управления асинхронными запросами в вашем коде.

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

Обещания бывают в трех состояниях -

• в ожидании (начальное состояние)
• решено (выполнено успешно)
• rejected(failed)

new Promise()используется для создания обещания. Конструктор обещания имеет один аргумент, который является функцией обратного вызова. Функция обратного вызова имеет два аргумента - разрешить и отклонить;

обе это внутренние функции. Асинхронный код, который вы пишете, т. Е. Вызов Ajax, загрузка изображения, функции синхронизации, войдет в функцию обратного вызова.

Если задача, выполненная в функции обратного вызова, выполнена успешно, вызывается функция разрешения; в противном случае вызывается функция отклонения с подробностями об ошибке.

Следующая строка кода показывает вызов структуры обещания -

var _promise = new Promise (function(resolve, reject) {
   var success = true;
   if (success) {
      resolve("success");
   } else {
      reject("failure");
   }
});
_promise.then(function(value) {
   //once function resolve gets called it comes over here with the value passed in resolve
   console.log(value); //success
}).catch(function(value) {
   //once function reject gets called it comes over here with the value passed in reject
   console.log(value); // failure.
});

Пример обещания ES6

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

Вывод

Promise is resolved!

ES6 - Обещания

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

Команда

npx babel promise.js --out-file promise_es5.js

BabelJS - ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log(msg);
});

Для обещаний код не меняется при переносе. Нам нужно использовать babel-polyfill, чтобы он работал в старых браузерах. Подробности о babel-polyfill объясняются в главе babel - poyfill.

Генераторы

Функция генератора как обычно function. Функция имеет специальный синтаксис: function * с * для функции и ключевое слово yield, которое будет использоваться внутри функции. Это означает, что при необходимости можно приостановить или запустить функцию. Обычные функции не могут быть остановлены в промежутке после начала выполнения. Он либо выполнит полную функцию, либо остановится, когда встретит оператор return. Генератор здесь работает по-другому, вы можете остановить функцию с помощью ключевого слова yield и запустить ее, снова вызвав генератор, когда это необходимо.

пример

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Вывод

{value: 8, done: false}
{value: 9, done: false}

ES6 - Генератор

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Команда

npx babel generator.js --out-file generator_es5.js

BabelJS - ES5

"use strict";

var _marked = /*#__PURE__*/regeneratorRuntime.mark(generatorfunction);

function generatorfunction(a) {
   return regeneratorRuntime.wrap(function generatorfunction$(_context) {
      while (1) {
         switch (_context.prev = _context.next) {
            case 0:
               _context.next = 2;
               return a;

            case 2:
               _context.next = 4;
               return a + 1;
               
            case 4:
            case "end":
               return _context.stop();
         }
      }
   }, _marked, this);
}

var g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Итераторы

Итератор в JavaScript возвращает объект JavaScript, у которого есть значение. У объекта также есть флаг done, который имеет значение true / false. Выдает false, если это не конец итератора. Рассмотрим пример и посмотрим, как работает итератор на массиве.

пример

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

В приведенном выше примере мы использовали массив чисел и вызвали функцию этого массива, используя Symbol.iterator в качестве индекса.

Результат, который мы получаем с помощью функции next () в массиве, выглядит следующим образом:

{value: 4, done: false}
{value: 7, done: false}
{value: 3, done: false}
{value: 10, done: false}
{value: undefined, done: true}

Вывод дает объект со значением и выполняется как свойства. Каждыеnext()вызов метода дает следующее значение из массива и выполняется как false. Значение done будет истинным только тогда, когда элементы из массива готовы. Мы можем использовать это для перебора массивов. Доступны другие варианты, напримерfor-of цикл, который используется следующим образом -

пример

let numbers = [4, 7, 3, 10];
for (let n of numbers) {
   console.log(n);
}

Вывод

4
7
3
10

Когда for-of loopиспользует ключ, он дает подробную информацию о значениях массива, как показано выше. Мы проверим обе комбинации и посмотрим, как babeljs переносит их в es5.

пример

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

let _array = [4, 7, 3, 10];
for (let n of _array) {
   console.log(n);
}

команда

npx babel iterator.js --out-file iterator_es5.js

Вывод

"use strict";

var numbers = [4, 7, 3, 10];
var a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

var _array = [4, 7, 3, 10];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = _array[Symbol.iterator](),
      _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
      _iteratorNormalCompletion = true) {
      var n = _step.value;

      console.log(n);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

Добавлены изменения for-ofцикл в es5. Но iterator.next остается как есть. Нам нужно использоватьbabel-polyfillчтобы он работал в старых браузерах. Babel-polyfill устанавливается вместе с babel, и то же самое можно использовать из node_modules, как показано ниже -

пример

<html>
   <head>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="iterator_es5.js"></script>
   </head>
   <body>
      <h1>Iterators</h1>
   </body>
</html>

Вывод

Разрушение

Свойство деструктурирования ведет себя как выражение JavaScript, которое распаковывает значения из массивов, объектов.

Следующий пример объяснит работу синтаксиса деструктуризации.

пример

let x, y, rem;
[x, y] = [10, 20];

console.log(x);
console.log(y);
[x, y, ...rem] = [10, 20, 30, 40, 50];
console.log(rem);

let z = 0;
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);
console.log(y);

Вывод

10
20
[30, 40, 50]
1
2

В приведенной выше строке кода показано, как значения присваиваются с правой стороны массива переменным с левой стороны. Переменная с...rem получает все оставшиеся значения из массива.

Мы также можем присвоить значения из объекта слева, используя условный оператор, как показано ниже -

({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x); // 1
console.log(y); // 2

Давайте преобразуем то же самое в ES5 с помощью babeljs -

команда

npx babel destructm.js --out-file destruct_es5.js

destruct_es5.js

"use strict";

var x = void 0,
   y = void 0,
   rem = void 0;
x = 10;
y = 20;

console.log(x);
console.log(y);
x = 10;
y = 20;
rem = [30, 40, 50];

console.log(rem);

var z = 0;

var _ref = z ? { x: 10, y: 20 } : { x: 1, y: 2 };

x = _ref.x;
y = _ref.y;

console.log(x);
console.log(y);

Шаблонные литералы

Литерал шаблона - это строковый литерал, в котором можно использовать выражения. Вместо одинарных или двойных кавычек используется обратная кавычка (``). Когда мы говорим выражение внутри строки, это означает, что мы можем использовать переменные, вызывать функцию и т. Д. Внутри строки.

пример

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

Вывод

Using Template literal : Value is 15.
Using normal way : Value is 15

ES6 - шаблонный литерал

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

команда

npx babel templateliteral.js --out-file templateliteral_es5.js

BabelJS - ES5

"use strict";

var a = 5;
var b = 10;
console.log("Using Template literal : Value is " + (a + b) + ".");

console.log("Using normal way : Value is " + (a + b));

Расширенные объектные литералы

В es6 новые функции, добавленные к объектным литералам, очень хороши и полезны. Мы рассмотрим несколько примеров объектных литералов в ES5 и ES6.

пример

ES5
var red = 1, green = 2, blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5); // {red: 1, green: 2, blue: 3}

ES6
let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6); // {red: 1, green: 2, blue: 3}

Если вы видите приведенный выше код, объект в ES5 и ES6 отличается. В ES6 нам не нужно указывать значение ключа, если имена переменных совпадают с ключом.

Давайте посмотрим на компиляцию для ES5 с использованием babel.

ES6-расширенный литерал объекта

const red = 1, green = 2, blue = 3;
let rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6);

let brand = "carbrand";
const cars = {
   [brand]: "BMW"
}
console.log(cars.carbrand);  //"BMW"

команда

npx babel enhancedobjliteral.js --out-file enhancedobjliteral_es5.js

BabelJS - ES5

"use strict";

function _defineProperty(obj, key, value) {
   if (key in obj) {
      Object.defineProperty(obj, key, {
         value: value, enumerable: true, configurable: true, writable: true
      });
   } else { obj[key] = value; } return obj;
}

var red = 1,
   green = 2,
   blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

var rgbes6 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes6);

var brand = "carbrand";
var cars = _defineProperty({}, brand, "BMW");

console.log(cars.carbrand); //"BMW"

Свойства по умолчанию, отдыха и спреда

В этом разделе мы обсудим свойства default, rest и spread.

По умолчанию

С ES6 мы можем использовать параметры по умолчанию для параметров функции следующим образом:

пример

let add = (a, b = 3) => {
   return a + b;
}

console.log(add(10, 20));  // 30
console.log(add(10));      // 13

Давайте перенесем приведенный выше код в ES5 с помощью babel.

команда

npx babel default.js --out-file default_es5.js

BabelJS - ES5

"use strict";

var add = function add(a) {
   var b = arguments.length > 1 >> arguments[1] !== undefined ? arguments[1] : 3;
   return a + b;
};

console.log(add(10, 20));
console.log(add(10));

Остаток

Параметр отдыха начинается с трех точек (...), как показано в примере ниже -

пример

let add = (...args) => {
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));    // 3
console.log(add(1, 2, 5, 6, 6, 7));   //27

В приведенной выше функции мы передаем n параметров функции add. Чтобы добавить все эти параметры, если это было в ES5, мы должны полагаться на объект arguments, чтобы получить подробную информацию об аргументах. С ES6,rest it помогает определить аргументы с помощью трех точек, как показано выше, и мы можем перебрать его и получить сумму чисел.

Note - Мы не можем использовать дополнительные аргументы при использовании трех точек, то есть отдыха.

пример

let add = (...args, value) => {    //syntax error
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

Приведенный выше код даст синтаксическую ошибку.

Компиляция для es5 выглядит следующим образом -

команда

npx babel rest.js --out-file rest_es5.js

Вавилон-ES5

"use strict";

var add = function add() {
   for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
   }

   var sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));
console.log(add(1, 2, 5, 6, 6, 7));

Распространение

Свойство Spread также имеет три точки, похожие на остальные. Ниже приведен рабочий пример, показывающий, как использовать свойство распространения.

пример

let add = (a, b, c) => {
   return a + b + c;
}
let arr = [11, 23, 3];
console.log(add(...arr));   //37

Давайте теперь посмотрим, как приведенный выше код передается с помощью babel -

команда

npx babel spread.js --out-file spread_es5.js

Бабель-ES5

"use strict";

var add = function add(a, b, c) {
   return a + b + c;
};
var arr = [11, 23, 3];
console.log(add.apply(undefined, arr));

Прокси

Прокси - это объект, в котором вы можете определять настраиваемое поведение для таких операций, как поиск свойств, присвоение, перечисление, функция, вызов и т. Д.

Синтаксис

var a = new Proxy(target, handler);

И цель, и обработчик являются объектами.

• target - это объект или может быть другим прокси-элементом.

• обработчик будет объектом со своими свойствами как функциями, которые будут давать поведение при вызове.

Давайте попробуем разобраться в этих функциях на примере -

пример

let handler = {
   get: function (target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

let o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
}

let a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);

В приведенном выше примере мы определили цель и обработчик и использовали их с прокси. Прокси возвращает объект с парами "ключ-значение".

Вывод

Siya Kapoor
Mumbai
invalid key

Давайте теперь посмотрим, как перенести приведенный выше код в ES5 с помощью babel -

команда

npx babel proxy.js --out-file proxy_es5.js

Бабель-ES5

'use strict';

var handler = {
   get: function get(target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

var o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
};

var a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);

В этой главе мы увидим, как перенести модули ES6 в ES5 с помощью Babel.

Модули

Рассмотрим сценарий, в котором необходимо повторно использовать части кода JavaScript. ES6 приходит вам на помощь с концепцией модулей.

А moduleэто не что иное, как кусок кода JavaScript, записанный в файле. Функции или переменные в модуле недоступны для использования, если файл модуля не экспортирует их.

Проще говоря, модули помогают вам писать код в вашем модуле и отображать только те части кода, к которым должны получить доступ другие части вашего кода.

Давайте рассмотрим пример, чтобы понять, как использовать модуль и как его экспортировать, чтобы использовать в коде.

пример

add.js

var add = (x,y) => {
   return x+y;
}

module.exports=add;

multiply.js

var multiply = (x,y) => {
   return x*y;
};

module.exports = multiply;

main.js

import add from './add';
import multiply from './multiply'

let a = add(10,20);
let b = multiply(40,10);

console.log("%c"+a,"font-size:30px;color:green;");
console.log("%c"+b,"font-size:30px;color:green;");

У меня есть три файла: add.js, которые складывают 2 заданных числа, multiply.js, который умножает два заданных числа, и main.js, который вызывает сложение и умножение и консоль на выходе.

Давать add.js и multiply.js в main.js, мы должны сначала экспортировать его, как показано ниже -

module.exports = add;
module.exports = multiply;

Чтобы использовать их в main.js, нам нужно импортировать их, как показано ниже

import add from './add';
import multiply from './multiply'

Нам нужен сборщик модулей для сборки файлов, чтобы мы могли выполнять их в браузере.

Мы можем это сделать -

• Использование Webpack
• Использование Gulp

Модули ES6 и Webpack

В этом разделе мы увидим, что такое модули ES6. Мы также узнаем, как использовать webpack.

Прежде чем мы начнем, нам нужно установить следующие пакеты -

npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env

Package.json

Мы добавили задачи pack и publish в сценарии, чтобы запускать их с помощью npm. Вот файл webpack.config.js, который создаст окончательный файл.

webpack.config.js

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['env']
            }
         }
      ]
   }
};

Запустите команду npm run pack, чтобы собрать файлы. Окончательный файл будет сохранен в папке dev /.

команда

npm run pack

dev/main_bundle.jsобщий файл создается. Этот файл объединяет add.js, multiply.js и main.js и сохраняет его вdev/main_bundle.js.

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};
/******/
/******/    // The require function
/******/    function __webpack_require__(moduleId) {
/******/
/******/       // Check if module is in cache
/******/       if(installedModules[moduleId]) {
/******/          return installedModules[moduleId].exports;
/******/       }
/******/       // Create a new module (and put it into the cache)
/******/       var module = installedModules[moduleId] = {
/******/          i: moduleId,
/******/          l: false,
/******/          exports: {}
/******/       };
/******/
/******/       // Execute the module function
/******/       modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/       // Flag the module as loaded
/******/       module.l = true;
/******/
/******/       // Return the exports of the module
/******/       return module.exports;
/******/    }
/******/
/******/
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports
/******/    __webpack_require__.d = function(exports, name, getter) {
/******/       if(!__webpack_require__.o(exports, name)) {
/******/          Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/       }
/******/    };
/******/
/******/    // define __esModule on exports
/******/    __webpack_require__.r = function(exports) {
/******/      if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/         Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/      }
/******/      Object.defineProperty(exports, '__esModule', { value: true });
/******/    };
/******/
/******/    // create a fake namespace object
/******/    // mode & 1: value is a module id, require it
/******/    // mode & 2: merge all properties of value into the ns
/******/    // mode & 4: return value when already ns object
/******/    // mode & 8|1: behave like require
/******/    __webpack_require__.t = function(value, mode) {
/******/       if(mode & 1) value = __webpack_require__(value);
/******/       if(mode & 8) return value;
/******/       if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/       var ns = Object.create(null);
/******/       __webpack_require__.r(ns);
/******/       Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/       if(mode & 2 && typeof value != 'string')
               for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/       return ns;
/******/    };
/******/
/******/    // getDefaultExport function for compatibility with non-harmony modules
/******/    __webpack_require__.n = function(module) {
/******/       var getter = module && module.__esModule ?
/******/       function getDefault() { return module['default']; } :
/******/       function getModuleExports() { return module; };
/******/       __webpack_require__.d(getter, 'a', getter);
/******/       return getter;
/******/    };
/******/
/******/    // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) {
               return Object.prototype.hasOwnProperty.call(object, property); 
            };
/******/
/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";
/******/
/******/
/******/    // Load entry module and return exports
/******/    return __webpack_require__(__webpack_require__.s = "./src/main.js");
/******/ })
/************************************************************************/
/******/ ({
/***/       "./src/add.js":
/*!********************!*\
!*** ./src/add.js ***!
\********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
   "use strict";

   eval(
      "\n\nvar add = function add(x, y) {\n return x + y;\n};
      \n\nmodule.exports = add;
      \n\n//# sourceURL = webpack:///./src/add.js?"
   );
   /***/ }),
/***/ "./src/main.js":
/*!*********************!*\
!*** ./src/main.js ***!
\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

      "use strict";
      eval(
         "\n\nvar _add = __webpack_require__(/*! ./add */ \"./src/add.js\");
         \n\nvar _add2 = _interopRequireDefault(_add);
         \n\nvar _multiply = __webpack_require__(/*! ./multiply */ \"./src/multiply.js\");
         \n\nvar _multiply2 = _interopRequireDefault(_multiply);
         \n\nfunction _interopRequireDefault(obj) {
            return obj >> obj.__esModule ? obj : { default: obj };
         }
         \n\nvar a = (0, _add2.default)(10, 20);
         \nvar b = (0, _multiply2.default)(40, 10);
         \n\nconsole.log(\"%c\" + a, \"font-size:30px;color:green;\");
         \nconsole.log(\"%c\" + b, \"font-size:30px;color:green;\");
         \n\n//# sourceURL = webpack:///./src/main.js?"
      );

/***/ }),

/***/ "./src/multiply.js":
/*!*************************!*\
   !*** ./src/multiply.js ***!
   \*************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

"use strict";
eval(
   "\n\nvar multiply = function multiply(x, y) {\n return x * y;\n};
   \n\nmodule.exports = multiply;
   \n\n//# sourceURL = webpack:///./src/multiply.js?"
);

/***/ })

/******/ });

Команда

Ниже приведена команда для проверки вывода в браузере.

npm run publish

Добавьте index.html в свой проект. Это вызывает dev / main_bundle.js.

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main_bundle.js"></script>
   </body>
</html>

Вывод

Модули ES6 и Gulp

Чтобы использовать Gulp для объединения модулей в один файл, мы будем использовать browserify и babelify. Сначала мы создадим настройку проекта и установим необходимые пакеты.

команда

npm init

Прежде чем мы начнем настройку проекта, нам нужно установить следующие пакеты:

npm install --save-dev gulp
npm install --save-dev babelify
npm install --save-dev browserify
npm install --save-dev babel-preset-env
npm install --save-dev babel-core
npm install --save-dev gulp-connect
npm install --save-dev vinyl-buffer
npm install --save-dev vinyl-source-stream

package.json после установки

Давайте теперь создадим gulpfile.js, который поможет запустить задачу по объединению модулей вместе. Мы будем использовать те же файлы, что и выше, с webpack.

пример

add.js

var add = (x,y) => {
   return x+y;
}

module.exports=add;

multiply.js

var multiply = (x,y) => {
   return x*y;
};

module.exports = multiply;

main.js

import add from './add';
import multiply from './multiply'

let a = add(10,20);
let b = multiply(40,10);

console.log("%c"+a,"font-size:30px;color:green;");
console.log("%c"+b,"font-size:30px;color:green;");

Здесь создается файл gulpfile.js. Пользователь будет просматривать и использовать трансформацию для детализации. babel-preset-env используется для переноса кода в es5.

Gulpfile.js

const gulp = require('gulp');
const babelify = require('babelify');
const browserify = require('browserify');
const connect = require("gulp-connect");
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');

gulp.task('build', () => {
   browserify('src/main.js')
   .transform('babelify', {
      presets: ['env']
   })
   .bundle()
   .pipe(source('main.js'))
   .pipe(buffer())
   .pipe(gulp.dest('dev/'));
});
gulp.task('default', ['es6'],() => {
   gulp.watch('src/app.js',['es6'])
});

gulp.task('watch', () => {
   gulp.watch('./*.js', ['build']);
});

gulp.task("connect", function () {
   connect.server({
      root: ".",
      livereload: true
   });
});

gulp.task('start', ['build', 'watch', 'connect']);

Мы используем browserify и babelify, чтобы позаботиться об экспорте и импорте модуля и объединить то же самое в один файл следующим образом:

gulp.task('build', () => {
   browserify('src/main.js')
   .transform('babelify', {
      presets: ['env']
   })
   .bundle()
   .pipe(source('main.js'))
   .pipe(buffer())
   .pipe(gulp.dest('dev/'));
});

Мы использовали преобразование, в котором babelify вызывается с предустановками env.

Папка src с main.js предоставляется для просмотра и сохраняется в папке dev.

Нам нужно запустить команду gulp start для компиляции файла -

команда

npm start

Вот последний файл, созданный в dev/ папка -

(function() {
   function r(e,n,t) {
      function o(i,f) {
         if(!n[i]) {
            if(!e[i]) {
               var c = "function"==typeof require&&require;
               if(!f&&c)return c(i,!0);if(u)return u(i,!0);
               var a = new Error("Cannot find module '"+i+"'");
               throw a.code = "MODULE_NOT_FOUND",a
            }
            var p = n[i] = {exports:{}};
            e[i][0].call(
               p.exports,function(r) {
                  var n = e[i][1][r];
                  return o(n||r)
               }
            ,p,p.exports,r,e,n,t)
         }
         return n[i].exports
      }
      for(var u="function"==typeof require>>require,i = 0;i<t.length;i++)o(t[i]);return o
   }
   return r
})()
({1:[function(require,module,exports) {
   "use strict";

   var add = function add(x, y) {
      return x + y;
   };

   module.exports = add;
},{}],2:[function(require,module,exports) {
   'use strict';

   var _add = require('./add');
   var _add2 = _interopRequireDefault(_add);
   var _multiply = require('./multiply');
   var _multiply2 = _interopRequireDefault(_multiply);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
   var a = (0, _add2.default)(10, 20);
   var b = (0, _multiply2.default)(40, 10);

   console.log("%c" + a, "font-size:30px;color:green;");
   console.log("%c" + b, "font-size:30px;color:green;");
},
{"./add":1,"./multiply":3}],3:[function(require,module,exports) {
   "use strict";

   var multiply = function multiply(x, y) {
      return x * y;
   };

   module.exports = multiply;

},{}]},{},[2]);

Мы будем использовать то же самое в index.html и запустить то же самое в браузере, чтобы получить результат -

<html>
   <head></head>
   <body>
      <h1>Modules using Gulp</h1>
      <script type="text/javascript" src="dev/main.js"></script>
   </body>
</html>

Вывод

В этой главе мы узнаем, как перенести функции ES7 в ES5.

В ECMA Script 7 добавлены следующие новые функции:

• Async-Await
• Оператор возведения в степень
• Array.prototype.includes()

Мы скомпилируем их в ES5 с помощью babeljs. В зависимости от требований вашего проекта, также можно скомпилировать код в любой версии ecma, например, от ES7 до ES6 или от ES7 до ES5. Поскольку версия ES5 является наиболее стабильной и отлично работает во всех современных и старых браузерах, мы скомпилируем код в ES5.

Асинхронное ожидание

Async - это асинхронная функция, которая возвращает неявное обещание. Обещание либо выполнено, либо отклонено. Асинхронная функция аналогична обычной стандартной функции. Функция может иметь выражение ожидания, которое приостанавливает выполнение до тех пор, пока оно не вернет обещание, и как только оно его получит, выполнение продолжается. Await будет работать, только если функция асинхронная.

Вот рабочий пример async и await.

пример

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

Вывод

Promise resolved after 5 seconds
hello after await

Выражение ожидания добавляется перед вызовом функции таймера. Функция таймера вернет обещание через 5 секунд. Таким образом, await остановит выполнение до тех пор, пока обещание функции таймера не будет разрешено или отклонено, а затем продолжится.

Давайте теперь перенесем приведенный выше код в ES5 с помощью babel.

ES7 - Асинхронное ожидание

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};
out();

команда

npx babel asyncawait.js --out-file asyncawait_es5.js

BabelJS - ES5

"use strict";

var timer = function timer() {
   return new Promise(function (resolve) {
      setTimeout(function () {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
var out = async function out() {
   var msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

Babeljs не компилирует объекты или методы; поэтому здесь использованные обещания не будут передаваться и будут отображаться как есть. Для поддержки обещаний в старых браузерах нам нужно добавить код, который будет поддерживать обещания. А пока давайте установим babel-polyfill следующим образом:

npm install --save babel-polyfill

Его следует сохранить как зависимость, а не как зависимость от разработчика.

Чтобы запустить код в браузере, мы будем использовать файл polyfill из node_modules \ babel-polyfill \ dist \ polyfill.min.js и вызывать его с помощью тега script, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="aynscawait_es5.js"></script>
   </body>
</html>

Когда вы запустите вышеуказанную тестовую страницу, вы увидите вывод в консоли, как показано ниже.

Оператор возведения в степень

** - это оператор, используемый для возведения в степень в ES7. В следующем примере показано, как работает то же самое в ES7, и код переносится с использованием babeljs.

пример

let sqr = 9 ** 2;
console.log(sqr);

Вывод

81

ES6 - Возведение в степень

let sqr = 9 ** 2;
console.log(sqr);

Чтобы перенести оператор возведения в степень, нам нужно установить плагин, который будет установлен следующим образом:

команда

npm install --save-dev babel-plugin-transform-exponentiation-operator

Добавьте информацию о плагине в .babelrc файл следующим образом -

{
   "presets":[
      "es2015"
   ],
   "plugins": ["transform-exponentiation-operator"]
}

команда

npx babel exponeniation.js --out-file exponeniation_es5.js

BabelJS - ES5

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Array.prototype.includes ()

Эта функция дает истину, если переданный ей элемент присутствует в массиве, и ложь, если в противном случае.

пример

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Вывод

true
true
false

Здесь мы снова должны использовать babel-polyfill как includes- это метод массива, и он не передается. Нам нужен дополнительный шаг для включения полифила, чтобы он работал в старых браузерах.

ES6 - array.includes

let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

команда

npx babel array_include.js --out-file array_include_es5.js

Бабель-ES5

'use strict';

var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = ['Siya', 'Tom', 'Jerry', 'Bean', 'Ben'];
console.log(names.includes('Tom'));
console.log(names.includes('Be'));

Чтобы протестировать его в старом браузере, нам нужно использовать полифилл, как показано ниже -

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="array_include_es5.js"></script>
   </body>
</html>

Вывод

Заполнение строк - это новая функция ES8, добавленная в javascript. Мы будем работать над простым примером, который перенесет заполнение строк в ES5 с помощью babel.

Заполнение строк

Заполнение строк добавляет еще одну строку с левой стороны в соответствии с указанной длиной. Синтаксис для строкового заполнения показан ниже -

Синтаксис

str.padStart(length, string);
str.padEnd(length, string);

пример

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

Вывод

_____abc
abc_____

ES8 - заполнение строки

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

команда

npx babel strpad.js --out-file strpad_es5.js

Вавилон - ES5

'use strict';

var str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

Js должен использоваться вместе с babel-polyfill, как показано ниже -

test.html

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules\babel-polyfill\dist\polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="strpad_es5.js"></script>
   </body>
</html>

BabelJS - это компилятор javascript, который изменяет синтаксис предоставленного кода на основе доступных предустановок и плагинов. Поток компиляции babel включает следующие 3 части:

• parsing
• transforming
• printing

Код, переданный babel, возвращается в прежнем виде с измененным синтаксисом. Мы уже видели, как в файл .babelrc добавляются пресеты для компиляции кода из es6 в es5 или наоборот. Пресеты - это не что иное, как набор плагинов. Babel ничего не изменит, если во время компиляции не указаны данные о пресетах или плагинах.

Давайте теперь обсудим следующие плагины -

• transform-class-properties
• Transform-exponentiation-operator
• For-of
• объект отдых и распространение
• async/await

Теперь мы создадим настройку проекта и поработаем над несколькими плагинами, которые дадут четкое представление о требованиях плагинов в babel.

команда

npm init

Нам нужно установить необходимые пакеты для babel - babel cli, babel core, babel-preset и т. Д.

Пакеты для babel 6

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Пакеты для babel 7

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Создайте файл js в своем проекте и напишите свой код js.

Классы - Transform-class-properties

Для этого соблюдайте коды, приведенные ниже -

пример

main.js

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

На данный момент мы не предоставили babel никаких сведений о предустановках или плагинах. Если нам случится перенести код с помощью команды -

npx babel main.js --out-file main_out.js

main_out.js

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Мы получим код как есть. Давайте теперь добавим пресет в.babelrc файл.

Note - Создать .babelrc файл внутри корневой папки вашего проекта.

.babelrc for babel 6

.babelrc for babel 7

{
   "presets":["@babel/env"]
}

Мы уже установили пресеты; теперь давайте снова запустим команду -

npx babel main.js --out-file main_out.js

main_out.js

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false; 
         descriptor.configurable = true; 
         if ("value" in descriptor) descriptor.writable = true; 
         Object.defineProperty(target, descriptor.key, descriptor); 
      }
   }
   return function (Constructor, protoProps, staticProps) { 
      if (protoProps) defineProperties(Constructor.prototype, protoProps); 
      if (staticProps) defineProperties(Constructor, staticProps); 
      return Constructor; 
   }; 
}();

function _classCallCheck(instance, Constructor) { 
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function"); 
   } 
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);
   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

В ES6 синтаксис класса выглядит следующим образом

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname + "-" + this.lname;
   }
}

Есть конструктор, внутри которого определены все свойства класса. В случае, если нам нужно определить свойства класса вне класса, мы не можем этого сделать.

пример

class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

Если нам удастся скомпилировать приведенный выше код, он выдаст ошибку в babel. Это приводит к тому, что код не компилируется.

Чтобы сделать это так, как мы хотим, мы можем использовать плагин babel, называемый babel-plugin-transform-class-properties. Чтобы он работал, нам нужно сначала установить его следующим образом:

Пакеты для babel 6

npm install --save-dev babel-plugin-transform-class-properties

Пакет для Babel 7

npm install --save-dev @babel/plugin-proposal-class-properties

Add the plugin to .babelrc file for babel 6 -

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-proposal-class-properties"]
}

Теперь мы снова запустим команду.

команда

npx babel main.js --out-file main_out.js

main.js

class Person {
   name = "Siya Kapoor";

   fullname = () => {
      return this.name;
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

Compiled to main_out.js

class Person {
   constructor() {
      this.name = "Siya Kapoor";

      this.fullname = () => {
         return this.name;
      };
   }
}
var a = new Person();
var persondet = a.fullname();
console.log("%c"+persondet, "font-size:25px;color:red;");

Output

Ниже приводится результат, который мы получаем при использовании в браузере.

Оператор возведения в степень - оператор возведения в степень

** - это оператор, используемый для возведения в степень в ES7. В следующем примере показано, как это работает в ES7. Он также показывает, как переносить код с помощью babeljs.

пример

let sqr = 9 ** 2;
console.log("%c"+sqr, "font-size:25px;color:red;");

Чтобы перенести оператор возведения в степень, нам нужно установить плагин следующим образом:

Packages for babel 6

npm install --save-dev babel-plugin-transform-exponentiation-operator

Packages for babel 7

npm install --save-dev @babel/plugin-transform-exponentiation-operator

Добавьте информацию о плагине в .babelrc файл следующим образом для babel 6 -

{
   "plugins": ["transform-exponentiation-operator"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-transform-exponentiation-operator"]
}

command

npx babel exponeniation.js --out-file exponeniation_out.js

exponeniation_out.js

let sqr = Math.pow(9, 2);
console.log("%c" + sqr, "font-size:25px;color:red;");

Output

Для-из

Пакеты, необходимые для плагинов в babel6 и 7, следующие:

Вавилон6

npm install --save-dev babel-plugin-transform-es2015-for-of

Вавилон 7

npm install --save-dev @babel/plugin-transform-for-of

.babelrc for babel6

{
   "plugins": ["transform-es2015-for-of"]
}

.babelrc for babel7

{
   "plugins": ["@babel/plugin-transform-for-of"]
}

forof.js

let foo = ["PHP", "C++", "Mysql", "JAVA"];
for (var i of foo) {
   console.log(i);
}

команда

npx babel forof.js --out-file forof_es5.js

Forof_es5.js

let foo = ["PHP", "C++", "Mysql", "JAVA"];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = foo[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var i = _step.value;

      console.log(i);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

Output

спред объекта

Пакеты, необходимые для плагинов в babel6 и 7, следующие:

Вавилон 6

npm install --save-dev babel-plugin-transform-object-rest-spread

Вавилон 7

npm install --save-dev @babel/plugin-proposal-object-rest-spread

.babelrc for babel6

{
   "plugins": ["transform-object-rest-spread"]
}

.babelrc for babel7

{
   "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

o.js

let { x1, y1, ...z1 } = { x1: 11, y1: 12, a: 23, b: 24 };
console.log(x1);
console.log(y1);
console.log(z1);

let n = { x1, y1, ...z1};
console.log(n);

команда

npx babel o.js --out-file o_es5.js

o_es5.js

var _extends = Object.assign || function (target) {
   for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i]; for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key]; 
         } 
      } 
   } 
   return target; 
};

function _objectWithoutProperties(obj, keys) {
   var target = {};
   for (var i in obj) {
      if (keys.indexOf(i) >= 0) continue;
      if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
      target[i] = obj[i];
   }
   return target;
}

let _x1$y1$a$b = { x1: 11, y1: 12, a: 23, b: 24 }, { x1, y1 } = _x1$y1$a$b,
   z1 = _objectWithoutProperties(_x1$y1$a$b, ["x1", "y1"]);
console.log(x1);
console.log(y1);
console.log(z1);

let n = _extends({ x1, y1 }, z1);
console.log(n);

Output

асинхронный / ожидание

Нам нужно установить следующие пакеты для babel 6 -

npm install --save-dev babel-plugin-transform-async-to-generator

Пакеты для babel 7

npm install --save-dev @babel/plugin-transform-async-to-generator

.babelrc for babel 6

{
   "plugins": ["transform-async-to-generator"]
}

.babelrc for babel 7

{
   "plugins": ["@babel/plugin-transform-async-to-generator"]
}

async.js

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = async () => {
   let msg = await timer();
   console.log(msg);
   console.log("hello after await");
};

out();

команда

npx babel async.js --out-file async_es5.js

async_es5.js

function _asyncToGenerator(fn) {
   return function () {
      var gen = fn.apply(this, arguments);
      return new Promise(function (resolve, reject) {
         function step(key, arg) {
            try {
               var info = gen[key](arg);
               var value = info.value; 
            } catch (error) {
               reject(error);
               return; 
            } if (info.done) {
               resolve(value); 
            } else {
               return Promise.resolve(value).then(function (value) {
                  step("next", value);
               },
               function (err) {
                  step("throw", err); }); 
            }
         } return step("next"); 
      });
   };
}

let timer = () => {
   return new Promise(resolve => {
      setTimeout(() => {
         resolve("Promise resolved after 5 seconds");
      }, 5000);
   });
};
let out = (() => {
   var _ref = _asyncToGenerator(function* () {
      let msg = yield timer();
      console.log(msg);
      console.log("hello after await");
   });

   return function out() {
      return _ref.apply(this, arguments);
   };
})();
out();

Мы должны использовать polyfill для того же, поскольку он не будет работать в браузерах, в которых не поддерживаются обещания.

Output

Babel Polyfill добавляет в веб-браузеры поддержку функций, которые недоступны. Babel компилирует код из последней версии ecma в ту, которую мы хотим. Он изменяет синтаксис в соответствии с предустановкой, но не может ничего сделать для используемых объектов или методов. Мы должны использовать polyfill для этих функций для обратной совместимости.

Элементы, которые можно полифилить

Ниже приведен список функций, которым требуется поддержка полифиллов при использовании в старых браузерах.

• Promises
• Map
• Set
• Symbol
• Weakmap
• Weakset
• Array.from, Array.includes, Array.of, Array # find, Array.buffer, Array # findIndex
• Object.assign, Object.entries, Object.values

Мы создадим настройку проекта, а также увидим работу полифилла babel.

команда

npm init

Теперь мы установим пакеты, необходимые для babel.

Пакеты для babel 6

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Пакеты для babel 7

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Вот последний package.json -

Мы также добавим es2015 к пресетам, так как мы хотим скомпилировать код в es5.

.babelrc for babel 6

.babelrc for babel 7

{
   "presets":["@babel/env"]
}

Мы установим lite-serve, чтобы мы могли протестировать наш код в браузере -

npm install --save-dev lite-server

Давайте добавим команду babel для компиляции нашего кода в package.json -

Мы также добавили команду сборки, которая вызывает lite-server.

Babel-polyfill устанавливается вместе с пакетом babel-core. Babel-polyfill будет доступен в модулях узлов, как показано ниже -

В дальнейшем мы будем работать над обещаниями и использовать вместе с ним babel-polyfill.

ES6 - Обещания

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

команда

npx babel promise.js --out-file promise_es5.js

BabelJS - ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log("%c"+msg, "font-size:25px;color:red;");
});

При компиляции ничего менять не нужно. Код для обещания был передан как есть. Но браузеры, которые не поддерживают обещания, выдадут ошибку, даже если мы скомпилировали код для es5.

Чтобы решить эту проблему, нам нужно добавить полифилл вместе с окончательным скомпилированным кодом es5. Чтобы запустить код в браузере, мы возьмем файл babel-polyfill из узловых модулей и добавим его в файл .html, где мы хотим использовать обещания, как показано ниже -

index.html

<html>
   <head>
   </head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="promise_es5.js"></script>
   </body>
</html>

вывод

В файле index.html мы использовали файл polyfill.min.js из node_modules за которым следует обещание_es5.js -

<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>

<script type="text/javascript" src="promise_es5.js"></script>

Note - Файл полифилла должен использоваться в начале перед основным вызовом javascript.

Заполнение строк

Заполнение строк добавляет еще одну строку с левой стороны в соответствии с указанной длиной. Синтаксис для строкового заполнения показан ниже -

Синтаксис

str.padStart(length, string);
str.padEnd(length, string);

пример

const str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

Вывод

_____abc
abc_____

Вавилон - ES5

npx babel strpad.js --out-file strpad_es5.js

команда

'use strict';

var str = 'abc';

console.log(str.padStart(8, '_'));
console.log(str.padEnd(8, '_'));

Js должен использоваться вместе с babel-polyfill, как показано ниже -

test.html

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing </title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="strpad_es5.js"></script>
   </body>
</html>

Карта, Набор, WeakSet, WeakMap

В этом разделе мы узнаем оMap, Set, WeakSet, WeakMap.

• Map это объект с парой ключ / значение.

• Set тоже объект, но с уникальными значениями.

• WeakMap and WeakSet iare также объекты с парами ключ / значение.

Map, Set, WeakMap и WeakSet - это новые функции, добавленные в ES6. Чтобы перенести его для использования в старых браузерах, нам нужно использовать polyfill. Мы будем работать над примером и использовать полифил для компиляции кода.

пример

let m = new Map(); //map example
m.set("0","A");
m.set("1","B");
console.log(m);

let set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

let ws = new WeakSet(); //weakset example
let x = {};
let y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

let wm = new WeakMap(); //weakmap example
let a = {};
wm.set(a, "hello");
console.log(wm.get(a));

Вывод

Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hello

команда

npx babel set.js --out-file set_es5.js

Бабель-ES5

"use strict";

var m = new Map(); //map example
m.set("0", "A");
m.set("1", "B");
console.log(m);

var set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);

var ws = new WeakSet(); //weakset example
var x = {};
var y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));

var wm = new WeakMap(); //weakmap example
var a = {};
wm.set(a, "hello");
console.log(wm.get(a));

Js должен использоваться вместе с babel-polyfill, как показано ниже -

test.html

<!DOCTYPE html>
<html>
   <head>
      <title>BabelJs Testing</title>
   </head>
   <body>
      <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script>
      <script type="text/javascript" src="set_es5.js"></script>
   </body>
</html>

Вывод

Методы массива

В массиве можно использовать многие свойства и методы; например, array.from, array.includes и т. д.

Давайте рассмотрим работу над следующим примером, чтобы лучше понять это.

пример

arraymethods.js

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], x => x + x));

Output

true
[6, 8, 10]

команда

npx babel arraymethods.js --out-file arraymethods_es5.js

Babel-es5

"use strict";

var arrNum = [1, 2, 3];

console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], function (x) {
return x + x;
}));

Методы, используемые в массиве, печатаются как есть. Чтобы они работали в старых браузерах, нам нужно добавить файл полифила в начале, как показано ниже -

index.html

<html>
   <head></head>
   <body>
      <h1>Babel Polyfill Testing</h1>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="arraymethods_es5.js"></script>
   </body>
</html>

Вывод

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

Сначала мы установим babel-cli для нашего проекта. Мы будем использовать babeljs для компиляции кода.

Создайте папку для своего проекта, чтобы поиграть с babel-cli.

команда

npm init

Дисплей

Package.json, созданный для указанного выше проекта -

Запустим команды для установки babel-cli.

Пакет для Babel 6

npm install --save-dev babel-cli

Пакет для Babel 7

npm install --save-dev @babel/cli

Дисплей

Мы установили babel-cli, и вот обновленный package.json -

В дополнение к этому нам нужно установить babel-preset и babel-core. Давайте теперь посмотрим на команду для установки.

Пакеты для babel 6

npm install --save-dev babel-preset-env
npm install --save-dev babel-core

Пакеты для babel 7

npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env

Вот обновленный package.json для вышеуказанных команд -

Поскольку нам нужно скомпилировать код JavaScript, который мы собираемся написать для обратной совместимости, мы скомпилируем его в сценарий ECMA 5. Для этого нам нужно указать babel на поиск предустановки, то есть версии es, в которой будет выполняться компиляция. сделанный. Нам нужно создать.babelrc> файл в корневой папке нашего проекта, созданный, как показано ниже.

Он содержит объект json со следующими деталями предустановок:

{ "presets": ["env"] }

Для babel 7 .babelrc выглядит следующим образом:

{
   "presets":["@babel/env"]
}

Мы установили babel local в проект. Чтобы использовать babel в нашем проекте, нам нужно указать то же самое в package.json следующим образом:

Скомпилировать файлы JS

Теперь мы готовы скомпилировать наши файлы JavaScript. Создайте в своем проекте папку src; в этой папке создайте файл с именем main.js и напишите код javascript es6, как показано ниже -

команда

npx babel src/main.js

Вывод

В приведенном выше случае код из main.js отображается в терминале в версии es5. Стрелочная функция из es6 преобразуется в es5, как показано выше. Вместо того, чтобы отображать скомпилированный код в терминале, мы сохраним его в другом файле, как показано ниже.

Мы создали папку в нашем проекте, в которой мы хотим хранить скомпилированные файлы. Ниже приведена команда, которая скомпилирует и сохранит вывод там, где мы хотим.

команда

npx babel src/main.js --out-file out/main_out.js

Вывод

Параметр в команде --out-file помогает нам сохранять вывод в выбранном нами расположении файла.

Если мы хотим, чтобы файл обновлялся каждый раз, когда мы вносим изменения в основной файл, добавляем --watch или же -w к команде, как показано ниже.

команда

npx babel src/main.js --watch --out-file out/main_out.js

Вывод

Вы можете внести изменения в основной файл; это изменение отразится в скомпилированном файле.

В приведенном выше случае мы изменили сообщение журнала и --watch опция продолжает проверять любые изменения, и те же изменения добавляются в скомпилированный файл.

Скомпилированный файл

В наших предыдущих разделах мы узнали, как компилировать отдельные файлы. Теперь мы скомпилируем каталог и сохраним скомпилированные файлы в другом каталоге.

В папке src мы создадим еще один файл js с именем main1.js. В настоящее время в папке src есть 2 файла javascript.main.js и main1.js.

Ниже приведен код в файлах -

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main1.js

var handler = () => {
   console.log("Added one more file");
}

Следующая команда скомпилирует код из srcпапку и сохраните ее в папке out /. Мы удалили все файлы изout/папку и оставил ее пустой. Мы запустим команду и проверим вывод в папке out /.

команда

npx babel src --out-dir out

У нас в папке out 2 файла - main.js и main1.js

main.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

main1.js

"use strict";

var handler = function handler() {
   console.log("Added one more file");
};

Затем мы выполним приведенную ниже команду, чтобы скомпилировать оба файла в один файл с помощью babeljs.

команда

npx babel src --out-file out/all.js

Вывод

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};
"use strict";

var handler = function handler() {
console.log("Added one more file");
};

Если мы хотим игнорировать компиляцию некоторых файлов, мы можем использовать параметр --ignore, как показано ниже.

команда

npx babel src --out-file out/all.js --ignore src/main1.js

Вывод

all.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

Мы можем использовать параметры плагинов, которые будут использоваться во время компиляции файла. Чтобы использовать плагины, нам нужно установить их, как показано ниже.

команда

npm install --save-dev babel-plugin-transform-exponentiation-operator

expo.js

let sqr = 9 ** 2;
console.log(sqr);

команда

npx babel expo.js --out-file expo_compiled.js --plugins=babel-plugin-transform-exponentiation-operator

Вывод

"use strict";

var sqr = Math.pow(9, 2);
console.log(sqr);

Мы также можем использовать предустановки в команде, как показано ниже.

команда

npx babel src/main.js --out-file main_es5.js --presets=es2015

Чтобы проверить приведенный выше случай, мы удалили опцию presets из .babelrc.

main.js

var arrowfunction = () => {
   console.log("Added changes to the log message");
}

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

Мы также можем игнорировать .babelrc из командной строки следующим образом:

npx babel --no-babelrc src/main.js --out-file main_es5.js --presets=es2015

Чтобы проверить приведенный выше случай, мы добавили предустановки обратно в .babelrc, и они будут проигнорированы из-за --no-babelrc, который мы добавили в команду. Подробности файла main_es5.js следующие:

main_es5.js

"use strict";

var arrowfunction = function arrowfunction() {
   console.log("Added changes to the log message");
};

Пресеты Babel - это детали конфигурации для babel-transpiler, сообщающие ему, что нужно транспилировать их в указанном режиме. Вот некоторые из самых популярных пресетов, которые мы собираемся обсудить в этой главе:

• ES2015
• Env
• React

Нам нужно использовать предустановки, в которых есть среда, в которой мы хотим преобразовать код. Например, предустановка es2015 преобразует код в es5 . Предустановка со значением env также преобразуется в es5 . У него также есть дополнительная функция, то есть опции. Если вы хотите, чтобы функция поддерживалась в последних версиях браузеров, babel преобразует код только в том случае, если в этих браузерах нет поддержки функций. С Предустановленным реагирует Бабель будет transpile кода , когда реагировать.

Для работы с пресетами нам нужно создать файл .babelrc в корневой папке нашего проекта. Чтобы показать работу, мы создадим настройку проекта, как показано ниже.

команда

npm init

Мы должны установить необходимый пресет babel, как показано ниже, вместе с babel cli, babel core и т. Д.

Вавилон 6 пакетов

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Пакеты Babel 7

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Note - babel-preset-es2015 устарел, начиная с версии 7.

es2015 or @babel/env

Создайте файл .babelrc в корне проекта (babel 6) -

В .babelrc предустановки - es2015. Это указание компилятору babel, что мы хотим преобразовать код в es2015.

Для babel 7 нам нужно использовать следующие пресеты:

{
   "presets":["@babel/env"]
}

Вот package.json после установки -

Поскольку мы установили babel локально, мы добавили команду babel в раздел скриптов в package.json.

Давайте поработаем на простом примере, чтобы проверить транспилинг с использованием предустановки es2015.

пример

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

Транслируется в es5, как показано ниже.

команда

npx babel main.js --out-file main_es5.js

main_es5.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Env

Используя предустановку Env, вы можете указать среду, в которую будет переноситься окончательный код.

Мы собираемся использовать ту же настройку проекта, что и выше, и изменить пресеты с es2015 на env, как показано ниже.

Кроме того, нам нужно установить babel-preset-env. Мы выполним приведенную ниже команду, чтобы установить то же самое.

команда

npm install babel-preset-env --save-dev

Мы снова скомпилируем main.js и посмотрим на результат.

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

команда

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Мы видели, что переданный код - es5. Если мы знаем среду, в которой будет выполняться наш код, мы можем использовать этот пресет, чтобы указать его. Например, если мы укажем последнюю версию браузеров для Chrome и Firefox, как показано ниже.

команда

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Теперь мы получаем синтаксис стрелочной функции как есть. Он не переносится в синтаксис ES5. Это связано с тем, что среда, которую мы хотим, чтобы наш код поддерживал, уже поддерживает функцию стрелки.

Babel заботится о компиляции кода в зависимости от окружения, используя babel-preset-env. Мы также можем настроить таргетинг на компиляцию на основе среды nodejs, как показано ниже.

Окончательная компиляция кода показана ниже.

команда

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Babel компилирует код согласно текущей версии nodejs.

React Preset

Мы можем использовать предустановку реакции, когда используем Reactjs. Мы будем работать над простым примером и использовать предустановку реакции, чтобы увидеть результат.

Чтобы использовать пресет, нам нужно установить babel-preset-react (babel 6) следующим образом:

npm install --save-dev babel-preset-react

Для Babel 7 это выглядит следующим образом:

npm install --save-dev @babel/preset-react

Изменения в .babelrc для babel6 следующие:

Для Babel 7

{
   "presets": ["@babel/preset-react"]
}

main.js

<h1>Hello, world!</h1>

команда

npx babel main.js --out-file main_env.js

main_env.js

React.createElement(
   "h1",
   null,
   "Hello, world!"
);

Код из main.js преобразуется в синтаксис reactjs с preset: react.

Webpack - это сборщик модулей, который упаковывает все модули с зависимостями - js, стили, изображения и т. Д. В статические активы .js, .css, .jpg, .png и т. Д. Webpack поставляется с предустановками, которые помогают компилировать в требуемую форму. Например, предустановка реакции, которая помогает получить окончательный результат в форме реакции, предустановка es2015 или env, которая помогает скомпилировать код в ES5, 6 или 7 и т. Д. Мы использовали babel 6 в настройке проекта. Если вы хотите перейти на babel7, установите необходимые пакеты babel, используя @ babel / babel-package-name.

Здесь мы обсудим настройку проекта с использованием babel и webpack. Создайте папку с названием и откройте то же самое в Visual Studio IDE.

Чтобы создать настройку проекта, запустите npm initbabelwebpack следующим образом:

Вот пакет package.json, созданный после npm init -

Теперь мы установим необходимые пакеты для работы с babel и webpack.

npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env

Вот Package.json после установки -

Теперь мы создадим файл webpack.config.js, в котором будут все детали для объединения файлов js. Эти файлы будут скомпилированы в es5 с помощью babel.

Для запуска webpack с помощью сервера мы используем webpack-server. Ниже приведены детали, добавленные к нему -

Мы добавили команду публикации, которая запустит webpack-dev-server и обновит путь, где хранятся окончательные файлы. Сейчас путь, который мы собираемся использовать для обновления финальных файлов, - это папка / dev.

Чтобы использовать webpack, нам нужно выполнить следующую команду -

npm run publish

Сначала нам нужно создать файлы webpack.config.js. В них будет информация о конфигурации для работы webpack.

Подробности в файле следующие -

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['env']
            }
         }
      ]
   }
};

Структура файла показана выше. Он начинается с пути h, который дает сведения о текущем пути.

var path = require('path'); //gives the current path

Далее идет объект module.exports, у которого есть свойства entry, output и module. Запись - это начальная точка. Здесь нам нужно указать основные js-файлы, которые нужно скомпилировать.

entry: {
   app: './src/main.js'
},

path.resolve(_dirname, ‘src/main.js’) - будет искать папку src в каталоге и main.js в этой папке.

Вывод

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

Вывод - это объект с указанием пути и имени файла. Путь будет содержать папку, в которой будет храниться скомпилированный файл, а в filename будет указано имя окончательного файла, который будет использоваться в вашем .html файле.

модуль

module: {
   rules: [
      {
         test: /\.js$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['env']
         }
      }
   ]
}

• Модуль - это объект с подробностями правил. Он имеет следующие свойства -

• test
• include
• loader
• query

• Test будет содержать подробную информацию обо всех файлах js, заканчивающихся на .js. У него есть шаблон, который будет искать .js в конце заданной точки входа.

• Include указывает используемой папке на файлы, которые необходимо просмотреть.

• Loader использует babel-loader для компиляции кода.

• Запрос имеет предустановки свойств, которые представляют собой массив со значением env - es5, es6 или es7.

Создайте в ней папку src и main.js ; напишите свой js-код на ES6. Позже запустите команду, чтобы увидеть, как она компилируется в es5 с помощью webpack и babel.

src/main.js

let add = (a,b) => {
   return a+b;
};
let c = add(10, 20);
console.log(c);

Запускаем команду -

npm run pack

Скомпилированный файл выглядит следующим образом -

dev/main_bundle.js

!function(e) {
   var t = {};
   function r(n) {
      if(t[n])return t[n].exports;var o = t[n] = {i:n,l:!1,exports:{}};
      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
   }
   r.m = e,r.c = t,r.d = function(e,t,n) {
      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
   },
   r.r = function(e) {
      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
   },
   r.t = function(e,t) {
      if(1&t&&(e = r(e)),8&t)return e;
      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
      var n = Object.create(null);
      if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
      return n
   },
   r.n = function(e) {
      var t = e&&e.__esModule?function() {return e.default}:function() {return e};
      return r.d(t,"a",t),t
   },
   r.o = function(e,t) {return Object.prototype.hasOwnProperty.call(e,t)},
   r.p = "",r(r.s = 0)
}([function(e,t,r) {"use strict";var n = function(e,t) {return e+t}(10,20);console.log(n)}]);
!function(e) {
   var t = {};
   function r(n) {
      if(t[n])return t[n].exports;
      var o = t[n] = {i:n,l:!1,exports:{}};
      return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
   }
   r.m = e,r.c = t,r.d = function(e,t,n) {
      r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
   },
   r.r = function(e) {
      "undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
   },
   r.t = function(e,t) {
      if(1&t&&(e=r(e)),
      8&t)return e;
      if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
      var n = Object.create(null);
      if(
         r.r(n),
         Object.defineProperty(n,"default",{enumerable:!0,value:e}),
         2&t&&"string"!=typeof e
      )
      for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
      return n
   },
   r.n = function(e) {
      var t = e&&e.__esModule?function() {return e.default}:function() {return e};
      return r.d(t,"a",t),t
   },
   r.o = function(e,t) {
      return Object.prototype.hasOwnProperty.call(e,t)
   },
   r.p = "",r(r.s = 0)
}([function(e,t,r) {
   "use strict";
   var n = function(e,t) {return e+t}(10,20);
   console.log(n)
}]);

Код компилируется, как показано выше. Webpack добавляет некоторый код, который требуется внутри, и код из main.js виден в конце. Мы утешили ценность, как показано выше.

Добавьте окончательный файл js в файл .html следующим образом:

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main_bundle.js"></script>
   </body>
</html>

Запускаем команду -

npm run publish

Чтобы проверить вывод, мы можем открыть файл в -

http://localhost:8080/

Получаем консольное значение, как показано выше. Теперь попробуем скомпилировать в один файл с помощью webpack и babel.

Мы будем использовать webpack для объединения нескольких файлов js в один файл. Babel будет использоваться для компиляции кода es6 в es5.

Теперь у нас есть 2 файла js в папке src / - main.js и Person.js, как показано ниже:

person.js

export class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

Мы использовали экспорт, чтобы использовать детали класса Person.

main.js

import {Person} from './person'
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
console.log(persondet);

В main.js мы импортировали Person из пути к файлу.

Note- Нам не нужно указывать person.js, а нужно указывать только имя файла. Мы создали объект класса Person и уточнили детали, как показано выше.

Webpack объединит person.js и main.js и обновить в dev/main_bundle.jsодним файлом. Запустите командуnpm run publish чтобы проверить вывод в браузере -

В этой главе мы поймем работу с JSX и babel. Прежде чем мы углубимся в детали, давайте разберемся, что такое JSX.

Что такое JSX?

JSX - это код JavaScript с комбинацией синтаксиса xml в нем. Тег JSX имеет имя тега, атрибуты и дочерние элементы, которые делают его похожим на xml.

React использует JSX для создания шаблонов вместо обычного JavaScript. Однако нет необходимости использовать его, ниже приведены некоторые плюсы, которые он дает.

• Это быстрее, потому что он выполняет оптимизацию при компиляции кода в JavaScript.

• Он также является типобезопасным, и большинство ошибок может быть обнаружено во время компиляции.

• Это упрощает и ускоряет написание шаблонов, если вы знакомы с HTML.

Мы использовали babel 6 в настройке проекта. Если вы хотите перейти на babel 7, установите необходимые пакеты babel, используя@babel/babel-package-name.

Мы создадим настройку проекта и будем использовать webpack для компиляции jsx с реакцией на обычный JavaScript с помощью Babel.

Чтобы начать настройку проекта, выполните приведенные ниже команды для установки babel, react и webpack.

команда

npm init

Теперь мы установим необходимые пакеты, с которыми нам нужно работать - babel, webpack и jsx -

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev webpack-dev-server
npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
npm install --save-dev react
npm install --save-dev react-dom

Вот package.json после установки -

Теперь создадим файл webpack.config.js, в котором будут все детали для объединения файлов js и их компиляции в es5 с помощью babel.

Для запуска веб-пакета с помощью сервера существует так называемый веб-пакет. Мы добавили команду публикации; эта команда запустит webpack-dev-server и обновит путь, где хранятся окончательные файлы. Сейчас путь, который мы собираемся использовать для обновления финальных файлов, - это папка / dev.

Чтобы использовать веб-пакет, нам нужно выполнить следующую команду -

npm run publish

Мы создадим webpack.config.js файлы, в которых есть детали конфигурации для работы webpack.

Подробности в файле следующие -

var path = require('path');

module.exports = {
   entry: {
      app: './src/main.js'
   },
   output: {
      path: path.resolve(__dirname, 'dev'),
      filename: 'main_bundle.js'
   },
   mode:'development',
   module: {
      rules: [
         {
            test:/\.(js|jsx)$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
               presets: ['es2015','react']
            }
         }
      ]
   }
};

Структура файла показана выше. Он начинается с пути, который дает информацию о текущем пути.

var path = require('path'); //gives the current path

Далее идет объект module.exports, у которого есть свойства entry, output и module.

Вход - это отправная точка. Здесь нам нужно указать основные файлы js, которые мы хотим скомпилировать.

entry: {
   app: './src/main.js'
},

path.resolve(_dirname, ‘src/main.js’) - будет искать папку src в каталоге и main.js в этой папке.

Вывод

output: {
   path: path.resolve(__dirname, 'dev'),
   filename: 'main_bundle.js'
},

Вывод - это объект с указанием пути и имени файла. Путь будет содержать папку, в которой будет храниться скомпилированный файл, а в filename будет указано имя конечного файла, который будет использоваться в вашем.html файл.

модуль

module: {
   rules: [
      {
         test:/\.(js|jsx)$/,
         include: path.resolve(__dirname, 'src'),
         loader: 'babel-loader',
         query: {
            presets: ['es2015','react']
         }
      }
   ]
}

• Модуль - это объект с деталями правил, который имеет свойства, например, test, include, loader, query.

• Test будет содержать подробную информацию обо всех файлах js, оканчивающихся на .js и .jsx. Он имеет шаблон, который будет искать .js и .jsx в конце указанной точки входа.

• Включить указывает папку, которая будет использоваться для поиска файлов.

• Loader использует babel-loader для компиляции кода.

• Запрос имеет предустановки свойств, которые представляют собой массив со значением env - es5, es6 или es7. Мы использовали es2015 и реагируем как предустановку.

Создать папку src/. Добавить main.js и App.jsx в этом.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
         var style = {
         color: 'red',
         fontSize: 50
      };
      return (
         <div style={style}>
            Hello World!!!
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(
      , document.getElementById('app'));

Выполните следующую команду, чтобы связать файл .js и преобразовать его с использованием предустановок. es2015 и react.

команда

npm run pack

Добавить main_bundle.js из папки dev в index.html -

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id = "app"></div>
      <script src = "dev/main_bundle.js"></script>
   </body>
</html>

команда

npm run publish

Вывод

Flow - это средство проверки статического типа для JavaScript. Для работы с Flow и Babel сначала создадим настройку проекта. Мы использовали babel 6 в настройке проекта. Если вы хотите перейти на babel 7, установите необходимые пакеты babel, используя@babel/babel-package-name.

команда

npm init

Установите необходимые пакеты для flow и babel -

npm install --save-dev babel-core babel-cli babel-preset-flow flow-bin babel-plugin-transform-flow-strip-types

Вот последний package.json после установки. Также добавлены команды babel и flow для выполнения кода в командной строке.

Создайте .babelrc внутри настройки проекта и добавьте предустановки, как показано ниже

Создать main.js файл и напишите свой код JavaScript, используя поток -

main.js

/* @flow */
function concat(a: string, b: string) {
   return a + b;
}

let a = concat("A", "B");
console.log(a);

Используйте команду babel для компиляции кода с использованием предустановок: переход к обычному javascript

npx babel main.js --out-file main_flow.js

main_flow.js

function concat(a, b) {
   return a + b;
}

let a = concat("A", "B");
console.log(a);

Мы также можем использовать плагин под названием babel-plugin-transform-flow-strip-types вместо предустановок следующим образом -

В .babelrc, добавьте плагин следующим образом -

main.js

/* @flow */
function concat(a: string, b: string) {
   return a + b;
}

let a = concat("A", "B");
console.log(a);

команда

npx babel main.js --out-file main_flow.js

main_flow.js

function concat(a, b) {
   return a + b;
}

let a = concat("A", "B");
console.log(a);

В этой главе мы создадим настройку проекта, используя babel и gulp. Gulp - это средство выполнения задач, использующее Node.js в качестве платформы. Gulp выполнит задачи, которые перенесут файлы JavaScript из es6 в es5, и после этого запустит сервер для проверки изменений. Мы использовали babel 6 в настройке проекта. Если вы хотите перейти на babel 7, установите необходимые пакеты babel, используя@babel/babel-package-name.

Сначала мы создадим проект, используя команды npm, и для начала установим необходимые пакеты.

команда

npm init

Мы создали папку с названием gulpbabel. Далее мы установим gulp и другие необходимые зависимости.

команда

npm install gulp --save-dev
npm install gulp-babel --save-dev
npm install gulp-connect --save-dev
npm install babel-preset-env --save-dev
npm install babel-core --save-dev

Мы добавим детали предустановленной среды в .babelrc файл следующим образом

gulpfile.js

var gulp =require('gulp');
var babel =require('gulp-babel');
var connect = require("gulp-connect");
gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});

gulp.task('watch', () => {
   gulp.watch('./*.js', ['build']);
});

gulp.task("connect", function () {
   connect.server({
      root: ".",
      livereload: true
   });
});

gulp.task('start', ['build', 'watch', 'connect']);

Мы создали три задачи в gulp, ['build', 'watch', 'connect']. Все файлы js, доступные в папке src, будут преобразованы в es5 с помощью babel следующим образом:

gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});

Окончательные изменения хранятся в папке dev. Babel использует детали предустановок из.babelrc. Если вы хотите перейти на какой-либо другой пресет, вы можете изменить детали в.babelrc файл.

Теперь создадим файл .js в папке src с помощью es6 javascript и запустим gulp start команда для выполнения изменений.

src/main.js

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}

Command: gulp start

dev/main.js

Это передается с помощью babel -

"use strict";

var _createClass = function () {
   function defineProperties(target, props) { 
      for (var i = 0; i <props.length; i++) { 
         var descriptor = props[i]; 
         descriptor.enumerable = descriptor.enumerable || false; 
         descriptor.configurable = true; 
         if ("value" in descriptor) descriptor.writable = true; 
         Object.defineProperty(target, descriptor.key, descriptor); 
      } 
   } 
   return function (Constructor, protoProps, staticProps) { 
      if (protoProps) defineProperties(Constructor.prototype, protoProps); 
      if (staticProps) defineProperties(Constructor, staticProps); 
      return Constructor; 
   }; 
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) { 
      throw new TypeError("Cannot call a class as a function"); 
   } 
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }
   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

Index.html

Это делается с помощью transpiled dev/main.js -

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/main.js"></script>
      <h1 id="displayname"></h1>
      <script type="text/javascript">
         var a = new Student("Siya", "Kapoor", "15", "Mumbai");
         var studentdet = a.fullname;
         document.getElementById("displayname").innerHTML = studentdet;
      </script>
   </body>
</html>

Output

Мы воспользуемся функциями ES6 и создадим простой проект. Babeljs будет использоваться для компиляции кода для ES5. В проекте будет набор изображений, которые будут автоматически перемещаться через фиксированное количество секунд. Мы будем использовать класс ES6 для работы над этим. Мы использовали babel 6 в настройке проекта. Если вы хотите перейти на babel 7, установите необходимые пакеты babel, используя@babel/babel-package-name.

Авто слайд изображения

Мы будем использовать gulp для сборки проекта. Для начала создадим настройку проекта, как показано ниже.

команда

npm init

Мы создали папку с названием babelexample. Далее мы установим gulp и другие необходимые зависимости.

команда

npm install gulp --save-dev
npm install gulp-babel --save-dev
npm install gulp-connect --save-dev
npm install babel-preset-env --save-dev

Вот Package.json после установки -

Мы добавим детали предустановленной среды в .babelrc файл следующим образом -

Так как нам нужна задача gulp для создания финального файла, мы создадим gulpfile.js с нужной нам задачей.

gulpfile.js

var gulp = require('gulp');
var babel = require('gulp-babel');
var connect = require("gulp-connect");
gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});
gulp.task('watch', () => {
   gulp.watch('./*.js', ['build']);
});

gulp.task("connect", function () {
   connect.server({
      root: ".",
      livereload: true
   });
});

gulp.task('start', ['build', 'watch', 'connect']);

Мы создали три задачи в gulp, ['build', 'watch', 'connect'] . Все файлы js, доступные в папке src, будут преобразованы в es5 с помощью babel следующим образом

gulp.task('build', () => {
   gulp.src('src/./*.js')
      .pipe(babel())
      .pipe(gulp.dest('./dev'))
});

Окончательные изменения хранятся в папке dev. Babel использует детали предустановок из .babelrc. Если вы хотите перейти на какой-либо другой пресет, вы можете изменить детали в файле .babelrc.

Теперь мы создадим .js файл в src папку с помощью es6 JavaScript и запустите gulp start команда для выполнения изменений.

Структура проекта следующая -

src/slidingimage.js

class SlidingImage {
   constructor(width, height, imgcounter, timer) {
      this.counter = 0;
      this.imagecontainerwidth = width;
      this.imagecontainerheight = height;
      this.slidercounter = imgcounter;
      this.slidetimer = timer;
      this.startindex = 1;
      this.css = this.applycss();
      this.maincontainer = this.createContainter();
      this.childcontainer = this.imagecontainer();
      this.autoslide();
   }

   createContainter() {
      let maindiv = document.createElement('div');
      maindiv.id = "maincontainer";
      maindiv.class = "maincontainer";
      document.body.appendChild(maindiv);
      return maindiv;
   }

   applycss() {
      let slidercss = ".maincontainer{ position : relative; margin :auto;}.left, 
         .right {
            cursor: pointer; position: absolute;" +
            "top: 50%; width: auto; padding: 16px; margin-top: -22px; color: white; font-weight: bold; " +
            "font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0;
         }.right { right: 0; border-radius: 3px 0 0 3px;}" +
         ".left:hover, .right:hover { background-color: rgba(0,0,0,0.8);}";
      let style = document.createElement('style');
      style.id = "slidercss";
      style.type = "text/css";
      document.getElementsByTagName("head")[0].appendChild(style);
      let styleall = style;
      if (styleall.styleSheet) {
      styleall.styleSheet.cssText = slidercss;
      } else {
         let text = document.createTextNode(slidercss);
         style.appendChild(text);
      }
   }

   imagecontainer() {
      let childdiv = [];
      let imgcont = [];
      for (let a = 1; a >= this.slidercounter; a++) {
         childdiv[a] = document.createElement('div');
         childdiv[a].id = "childdiv" + a;
         childdiv[a].style.width = this.imagecontainerwidth + "px";
         childdiv[a].style.height = this.imagecontainerheight + "px";
         if (a > 1) {
            childdiv[a].style.display = "none";
         }
         imgcont[a] = document.createElement('img');
         imgcont[a].src = "src/img/img" + a + ".jpg";
         imgcont[a].style.width = "100%";
         imgcont[a].style.height = "100%";
         childdiv[a].appendChild(imgcont[a]);
         this.maincontainer.appendChild(childdiv[a]);
      }
   }

   autoslide() {
      console.log(this.startindex);
      let previousimg = this.startindex;
      this.startindex++;
      if (this.startindex > 5) {
         this.startindex = 1;
      }
      setTimeout(() => {
         document.getElementById("childdiv" + this.startindex).style.display = "";
         document.getElementById("childdiv" + previousimg).style.display = "none";
         this.autoslide();
      }, this.slidetimer);
   }
}

let a = new SlidingImage(300, 250, 5, 5000);

Мы создадим img/папка в src /, так как нам нужны изображения для отображения; эти изображения должны вращаться каждые 5 секунд. В папке dev / будет храниться скомпилированный код. Запуститьgulp start для создания окончательного файла.

Окончательная структура проекта показана ниже -

В slidingimage.js, мы создали класс SlidingImage , который имеет такие методы, как createcontainer, imagecontainer и autoslide , который создает основной контейнер и добавляет в него изображения. Метод autoslide помогает изменить изображение через указанный промежуток времени.

let a = new SlidingImage(300, 250, 5, 5000);

На этом этапе вызывается класс. Мы передадим ширину, высоту, количество изображений и количество секунд, чтобы повернуть изображение.

команда

gulp start

dev/slidingimage.js

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i]; 
         descriptor.enumerable = descriptor.enumerable || false; 
         descriptor.configurable = true; 
         if ("value" in descriptor) descriptor.writable = true; 
         Object.defineProperty(target, descriptor.key, descriptor); 
      } 
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps); return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function"); 
   } 
}

var SlidingImage = function () {
   function SlidingImage(width, height, imgcounter, timer) {
      _classCallCheck(this, SlidingImage);
      this.counter = 0;
      this.imagecontainerwidth = width;
      this.imagecontainerheight = height;
      this.slidercounter = imgcounter;
      this.slidetimer = timer;
      this.startindex = 1;
      this.css = this.applycss();
      this.maincontainer = this.createContainter();
      this.childcontainer = this.imagecontainer();
      this.autoslide();
   }
   _createClass(SlidingImage, [{
      key: "createContainter",
      value: function createContainter() {
         var maindiv = document.createElement('div');
         maindiv.id = "maincontainer";
         maindiv.class = "maincontainer";
         document.body.appendChild(maindiv);
         return maindiv;
      }
   }, {
      key: "applycss",
      value: function applycss() {
         var slidercss = ".maincontainer{ position : relative; margin :auto;}.left, .right {
            cursor: pointer; position: absolute;" + "top: 50%;
            width: auto;
            padding: 16px;
            margin-top: -22px;
            color: white;
            font-weight: bold;
            " + "font-size: 18px;
            transition: 0.6s ease;
            border-radius: 0 3px 3px 0;
         }
         .right { right: 0; border-radius: 3px 0 0 3px;}" +
            ".left:hover, .right:hover { background-color: rgba(0,0,0,0.8);}";
         var style = document.createElement('style');
         style.id = "slidercss";
         style.type = "text/css";
         document.getElementsByTagName("head")[0].appendChild(style);
         var styleall = style;
         if (styleall.styleSheet) {
            styleall.styleSheet.cssText = slidercss;
         } else {
            var text = document.createTextNode(slidercss);
            style.appendChild(text);
         }
      }
   }, {
      key: "imagecontainer",
      value: function imagecontainer() {
      var childdiv = [];
      var imgcont = [];
      for (var _a = 1; _a <= this.slidercounter; _a++) {
         childdiv[_a] = document.createElement('div');
         childdiv[_a].id = "childdiv" + _a;
         childdiv[_a].style.width = this.imagecontainerwidth + "px";
         childdiv[_a].style.height = this.imagecontainerheight + "px";
         if (_a > 1) {
            childdiv[_a].style.display = "none";
         }
         imgcont[_a] = document.createElement('img');
         imgcont[_a].src = "src/img/img" + _a + ".jpg";
         imgcont[_a].style.width = "100%";
         imgcont[_a].style.height = "100%";
         childdiv[_a].appendChild(imgcont[_a]);
         this.maincontainer.appendChild(childdiv[_a]);
         }
      }
   }, {
      key: "autoslide",
      value: function autoslide() {
         var _this = this;

         console.log(this.startindex);
         var previousimg = this.startindex;
         this.startindex++;
         if (this.startindex > 5) {
            this.startindex = 1;
         }
         setTimeout(function () {
            document.getElementById("childdiv" + _this.startindex).style.display = "";
            document.getElementById("childdiv" + previousimg).style.display = "none";
            _this.autoslide();
         }, this.slidetimer);
      }
   }]);
   return SlidingImage;
}();

var a = new SlidingImage(300, 250, 5, 5000);

Мы проверим строку кода в браузере, как показано ниже -

index.html

<html>
   <head></head>
   <body>
      <script type="text/javascript" src="dev/slidingimage.js"></script>
      <h1>Sliding Image Demo</h1>
   </body>
</html>

Мы использовали скомпилированный файл из папки dev в index.html. Командаgulp start запускает сервер, на котором мы можем протестировать вывод.

В Chrome

В Firefox

В Internet Explorer

Скомпилированный код отлично работает во всех браузерах.