ES6 подготовка к работе. - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul ES6 подготовка к работе., kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Babel, Artikel ES6, Artikel javascript, Artikel npm, Artikel командная строка, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : ES6 подготовка к работе.
link : ES6 подготовка к работе.

Baca juga


ES6 подготовка к работе.

Установка и настройка Babel.





Для работы с ES6 нам нужно установить Babel и сделать некоторые настройки.

Для этого нужно установить последнюю стабильную версию Node.js и NPM.

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

Установка очень простая и я на ней останавливаться не буду.

После установки Node.js вы сможете проверить версию набрав в КС (командная строка - здесь и далее)

node -v


npm -v
- для версии NPM.

Создадим рабочую папку из КС - в нужной директории

mkdir Имя_Папки_проекта


Для перехода в папку (директорию).

cd Имя_папки_(или_директории)


Или можно просто перетащить нужную папку прямо в КС и нажать Enter, таким образом получить путь и перейти к нужной папке.

Переходим в созаную папку.

Теперь нам нужно инициализировать NPM.

В КС набираем:

npm init -y


В нашем случае -y обозначает, что мы принимаем все параметры по умолчанию (Yes).

В папке вашего проекта после этого появится файл package.jsonВ этом файле содержится информация необходимая для работы NPM.

Вернемся к Babel



Babel предназначен для траспиляции кода. Транспиляция - это перевод кода с одного языка на другой. В нашем случае с ES6 на ES5. После этого мы сможем использовать код в любом современном браузере.

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

Пройдя по этой ссылке Using Babelмы сможем с вами выбрать нужную нам конфигурацию. Так как у нас есть Node.js, NPM и мы собираемся использовать CLI , то наша команда сформируется так

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


cli - comande line interface Интерфейс командной строки - позволит использовать команду babel в самой КС, как NPM.

babel-core - основой модуль Babel.

babel-preset-es2015 - модуль еобходимый для транспиляции ES6.

--save-dev добавит модули в package.json в раздел devDependencies, в которм указываются модули необходимые для разработки.

После установки в папке проекта появится папка node_modules.

В этой папке содержатся папки модулей, которые мы устаовили. Также эти модули добавились в наш файл package.json в раздел devDependencies.

В папке проекта создадим папку src Source-Источник - для исходного кода. и папку dist Distribution -распространиение.- конечный код.

index.html - (так же в корне папки проекта) файл с помощью которого мы будем проверять работоспособность кода.

В этом файле обычная разметка с тегом script



<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script></script>
</body>
</html>



Проверить Babel

В папке src создадим файл script.js.

Внутри файла мы попробуем одно из нововедений ES6 



    let variable = "Item";



let - ключевое слово, которе позволяет объявлять локальные переменные.

Теперь нам нужно перевести (транспилировать) ES6 в ES5.

Для этого в файле package.json в разделе scriptsудаляем скрпт-тест ("test": "echo \"Error: no test specified\" && exit 1") вставим следующее -

"build": "babel src -d dist --presets es2015"

Это мы написали скрипт, который будет брасть исходный код из папки src. -d - указывает куда поместить измененный код - dist.

--presets es2015 - указывает что мы транспилируем код ES 6.

Сохраняем

В КС

npm run build


Этой командой мы можем запускать скрипты, которые мы указываем в файле package.json

Нажимаем Enter Запустится скрипт и когда он завершится в папке dist

Появится файл script.jsвот с таким содержимым: 



    "use strict";

    var variable = "Item";



Как вы видете слово let заменено на var и значит все транспилировалось и можно использовать код на странице.

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

npm run build


Мы добавим еще один скрипт в файл package.json

"watch": "babel src -d dist --presets es2015 -w"

-w означает, что теперь Babel будет смотрет за файлами в папке src. И как тоько будут изменения в файлах или вообще в папке src (например - создание нового файла) то тут же все автоматически отразится уже готовым кодом в папке dist.

package.json

{
  "name": "ES-6-new",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d dist --presets es2015",
    "watch": "babel src -d dist --presets es2015 -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1"
  }
}



Здесь файл package.json полностью с выделенными красным цветом изменениями.

Теперь запускаем команду в КС:

npm run watch


И теперь запишем в наш файл script.js в папке src

let say = "Hello";

Сохраним.

И в файле script.js в папке dist отразятся наши изменения:

var say = "Hello";

Остановить слежение - Ctrl + C и Y если остановить или N - если продолжить.

См картинку ниже:



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

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


Demikianlah Artikel ES6 подготовка к работе.

Sekianlah artikel ES6 подготовка к работе. kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel ES6 подготовка к работе. dengan alamat link https://dev-create.blogspot.com/2018/09/es6.html