Обновлено 2022 г.
Одним из самых больших изменений по сравнению с ES5 является то, что ES6/ES7 JavaScript нельзя компилировать непосредственно в браузерах. Нам нужно использовать транспилер под названием Babel.js
для создания совместимого JavaScript, который могут читать старые браузеры.
Babel позволяет вам использовать функции и синтаксис ES6 в вашем проекте, а затем переводит их в ES5, чтобы вы могли использовать их в производстве.
Чтобы использовать Babel при сборке вашего проекта, вам нужно добавить package.json в свой проект. Здесь будут храниться все ваши зависимости для вашего проекта.
Убедитесь, что у вас установлены Node и npm (или Node и Yarn, если вы предпочитаете использовать Yarn), а затем введите команду npm init
или yarn init
в терминале. Ответьте на возникающие вопросы, и package.json
будет предварительно заполнено этими значениями.
Используйте npm/yarn, чтобы добавить babel к вашим зависимостям с помощью команды:
npm install --save-dev babel-cli
// or
yarn add babel-cli --dev
Вы будете использовать поле scripts в вашем package.json
, чтобы установить команду сборки с помощью Babel. Фактическая команда будет отличаться в зависимости от папки, из которой вы строите, и места, в которое вы хотите строить.
Наконец, в корневой папке вашего проекта (где находится package.json
) создайте файл .babelrc
. Это файл конфигурации Babel, который скажет Babel преобразовать ваш код в ES5. Установите пресет с помощью:
npm install --save-dev babel-preset-env
// or
yarn add babel-preset-env --dev
А затем определите его в своем файле .babelrc
:
{
“presets”: [“env”]
}
Теперь вы можете запустить Babel, выполнив команду сборки. Ваша папка назначения теперь должна выглядеть точно так же, как исходная папка, за исключением того, что содержимое папки назначения представляет собой код ES5, а не ES6.
Если вы используете библиотеку JavaScript или фреймворк, например create-react-app
, более чем вероятно, что Babel уже настроен для вас и вам не понадобится беспокоиться об этом. Это для проектов, которые создаются с нуля.