<MyRusakov.ru />

Профессия Web-разработчик

Профессия Web-разработчик

Этот комплект за 8 месяцев превратит Вас в Web-разработчика с нуля. Учиться достаточно 1 час в день.

Начнёте Вы с HTML, CSS и вёрстки сайтов. Потом перейдёте к программированию и JavaScript. Затем изучите PHP, MySQL, SQL, Python. Изучите Web-фреймворки Laravel и Django. Создадите 5 своих сайтов для портфолио.

Комплект содержит:

- 540 видеоуроков

- 110 часов видео

- 1205 заданий для закрепления материала из уроков

- 5 финальных тестов

- 7 сертификатов

- 12 Бонусных курсов

Подробнее
Подписка

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

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Компилятор Babel для JS

Компилятор Babel для JS

Babel преобразует новый синтаксис ES6 в совместимый синтаксис со всеми браузерами ES5. Благодаря компилятору Babel, программисты прямо сейчас могут использовать самый современный JS, не дожидаясь полной поддержи браузеров.

А что касается IE11, то этой поддержки вряд ли когда-нибудь дождемся. Без компиляторов кода было бы сложно пробиваться новым технологиям в веб-разработке.

По этой ссылке можно попробовать скомпилировать JS код, однако для серьёзной разработки необходимо Babel установить на компьютер. У вас уже должен быть установлен node.js. Очень удобно пользоваться редактором кода VS code, из-за встроенного в программу терминала.

Установка Babel


Шаг 1) Создайте директорию project с пустым файлом, назовем его in.js

Шаг 2) Запустите команду:

npm install -g babel-cli --save-dev

Командная строка инсталлирует Babel и создаст файл package.json. Одного Babel недостаточно, ещё нужны плагины. Целесообразнее установить целый набор плагинов, например для ES2015.

Шаг 3) Дальше пишем:

npm install babel-preset-2015--save-dev

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

Вводим команду:

babel in.js –out-file out.js

В package.json добавим нашу первую команду, которую выполнит программа Babel.

"scripts": { "build": "babel project –d –presets 2015 ", },

Шаг 4) Напишем ES6 код стрелочной функции в in.js:

[1, 2, 3].map((n) => n + 1);

Шаг 5) Затем введем команду терминале:

npm run build

Шаг 6) Автоматически создастся файл out.js с ES5 кодом.

На данном этапе код не будет компилироваться сам по себе, каждый раз, когда мы напишем что-нибудь в файле in.js, надо вводить в терминале команду запуска npm run build.

Программисты народ ленивый, неужели так и будут запускать команду? Нет конечно, ещё одна строчка кода решит эту проблему.

Конфигурация Babel

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

Добавим ещё одну строчку в package.json с командой watch. Эта команда самостоятельно отслеживает изменения в исходном JS файле и сразу компилирует код из ES6 в ES5.

"scripts": {
    "build": "babel project –d –presets 2015",
    "watch": "babel project –d –presets 2015 -w ",
},

Вводим команду npm run watch только один раз – это запускает режим наблюдения.

Допустим, мы хотим исходный файл положить в папку src, а компилированный файл в папку dist. Так, будет правильнее. Создадим папку src и положим туда in.js. Естественно, что об этом нужно сообщить Babel.

Эта команда создаст папку dist:

babel src –d dist

Минификация кода

Babel умеет сжимать код:

babel src –d dist –minified

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

npm install –save-dev babel-preset-react

Набор с плагинами для React добавим в package.json.

"babel": {
    "presets": [
    "es2015",
    "react",
]

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (3):

Silver78 Silver78 26.08.2019 13:08:14

Автор, статьи интересные и полезные ... НО(!) выучи правила расстановки запятых в предложениях!!! Кровь из глаз идет когда ты их тыкаешь куда не надо! Если сам не грамотный, то попроси кого-то из знакомых/друзей чтоб они исправляли твои ошибки перед выкладыванием на сайт.

Ответить

porsake porsake 26.08.2019 13:58:41

спасибо что заметили, исправили.

Ответить

Silver78 Silver78 26.08.2019 14:34:38

"Babel преобразует новый синтаксис ES6 в совместимый синтаксис, со всеми браузерами ES5" ... запятая там не нужна! дальше не смотрел. смысла в этом нет. Если это уже "исправили", то и все остальное, думаю, аналогично

Ответить

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