Как автоматически конвертировать ES6 JS в ES5 с помощью Babel в NetBeans

Содержание

1 Требования
2 1. Установите Babel и создайте скрипт компиляции
3 2. Выполнить команду компиляции

Если вы заботитесь о своем проекте, возможно, вы уже пишете свой JavaScript, используя последний синтаксис ES6. Единственный недостаток написания всего вашего кода в соответствии с синтаксисом ES6 заключается в том, что он не будет совместим со старым браузером, который не поддерживает его. Лучшее решение этой проблемы — просто использовать BabelJS чтобы перенести ваш код и обеспечить кросс-браузерную поддержку. В этом руководстве мы покажем, как преобразовать файлы ES6 JS в ES5, автоматически настраивая Babel Js в NetBeans.

Заметка

В зависимости от того, как вы работаете, это может быть не лучшим вариантом для переноса вашего кода, так как вы также можете минимизировать его. В таком случае рекомендуется вместо этого использовать gulp. Этот учебник будет работать, только если вы хотите перенести все файлы ES6 JS в его версию ES5 в другой каталог.

Требования

Вам понадобится установить Node.js на вашу машину и NPM.

1. Установите Babel и создайте скрипт компиляции

В качестве первого шага вам необходимо установить babel-cli на ваш проект. Это обеспечит возможность выполнения (netbeans) команды babel из командной строки. Вы можете установить модуль babel-cli в свой проект, используя следующую команду:

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

После установки babel-cli вы сможете написать команду, которая создает файлы ES6 из одного каталога в другой. Чтобы упростить вам задачу, мы написали очень простую команду, которая выполняет упомянутый процесс. С помощью этой команды мы указываем, что все содержимое папки es6 должно быть скомпилировано в ES5 с использованием babel-preset-env, а его вывод должен быть помещен в каталог js корня проекта (вы, очевидно, можете изменить каталог) , Важным моментом автоматической компиляции при внесении изменений является --watch Аргумент, который будет компилировать ваш код ES6 при каждом сохранении / создании / изменении файла:

npx babel es6 --watch --presets babel-preset-env --out-dir js

Вам нужно всего лишь зарегистрировать эту команду в своем package.json файл для продолжения, например, в нашем проекте мы назовем его ES6-to-ES5:

{
"name": "myapp",
"version": "1.0.0",
"description": "",
"scripts": {
"ES6-to-ES5": "npx babel es6 --watch --presets babel-preset-env --out-dir js"
},
"author": "",
"license": "MIT",
"presets": [
"env"
],
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
}

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

2. Выполнить команду компиляции

Перед запуском команды вы должны установить пакеты, если они не установлены с использованием npm install, Это установит необходимые модули, и вы сможете запустить скрипт ES6-to-ES5. Далее выберите ваш проект или файл package.json и щелкните по нему правой кнопкой мыши, это отобразит контекстное меню с параметром «Сценарии npm». Это перечислит все сценарии в файле package.json и позволит вам просто щелкнуть по нему, чтобы выполнить его. Поскольку у нас есть только эта команда, мы можем просто нажать на нее:

Это запустит новый процесс консоли в NetBeans, который первоначально перенесет текущий код в ES5 и новый динамически:

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

Заметка

Каждый раз, когда вы закрываете окно вывода (завершаете процесс) или выходите из NetBeans, вам нужно будет снова запускать команду.

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