Babel - отличная запись в наборе инструментов для веб-разработчиков. Это потрясающий инструмент, и он существует уже довольно давно, но в настоящее время почти каждый разработчик JavaScript полагается на него, и это будет продолжаться, потому что Babel теперь незаменим и решил большую проблему для всех.
- Введение в Вавилон
- Установка Babel
- Пример конфигурации Babel
- Пресеты Babel
- Использование Babel с веб-пакетом
В этой статье рассматривается Babel 7, текущий стабильный выпуск.
Введение в Вавилон
Babel - потрясающий инструмент, и он существует уже довольно давно, но в настоящее время почти каждыйJavaScriptразработчик полагается на него, и это будет продолжаться, потому что Babel теперь незаменим и решил большую проблему для всех.
Задача которого?
Проблема, с которой наверняка сталкивался каждый веб-разработчик: функция JavaScript доступна в последней версии браузера, но не в более старых версиях. Или, может быть, Chrome или Firefox реализуют это, но Safari iOS и Edge нет.
Например, ES6 представилстрелочная функция:
[1, 2, 3].map((n) => n + 1)
Который сейчас поддерживается всеми современными браузерами. IE11 не поддерживает его, ни Opera Mini (как узнать?Таблица совместимости ES6).
Так что же делать с этой проблемой? Следует ли вам двигаться дальше и оставить клиентов со старыми / несовместимыми браузерами или написать старый код JavaScript, чтобы все ваши пользователи были довольны?
Войдите в Вавилон. Вавилонкомпилятор: он берет код, написанный в одном стандарте, и переносит его в код, написанный в другом стандарте.
Вы можете настроить Babel для преобразования современного JavaScript ES2017 в синтаксис JavaScript ES5:
[1, 2, 3].map(function(n) {
return n + 1
})
Это должно произойти во время сборки, поэтому вы должны настроить рабочий процесс, который сделает это за вас.Webpackэто обычное решение.
(PS если все этоESвещь кажется вам запутанной, подробнее о версиях ESв руководстве по ECMAScript)
Установка Babel
Babel легко устанавливается с помощьюnpm, локально в проекте:
npm install --save-dev @babel/core @babel/cli
Раньше я рекомендовал установить
babel-cli
глобально, но сейчас разработчики Babel не одобряют этого, потому что, используя его локально, вы можете иметь разные версии Babel в каждом проекте, а также проверка babel в вашем репозитории лучше для командной работы
Поскольку npm теперь поставляется сnpx
, локально установленные пакеты CLI можно запустить, набрав команду в папке проекта:
Итак, мы можем запустить Babel, просто запустив
npx babel script.js
Пример конфигурации Babel
Babel из коробки ничего полезного не делает, нужно его настраивать и добавлять плагины.
Чтобы решить проблему, о которой мы говорили во введении (используя функции стрелок в каждом браузере), мы можем запустить
npm install --save-dev \
@babel/plugin-transform-arrow-functions
чтобы загрузить пакет вnode_modules
папку нашего приложения, тогда нам нужно добавить
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}
к.babelrc
файл присутствует в корневой папке приложения. Если у вас еще нет этого файла, вы просто создаете пустой файл и помещаете в него это содержимое.
СОВЕТ: Если вы никогда не видели точечный файл (файл, начинающийся с точки), это может быть сначала странно, потому что этот файл может не отображаться в вашем файловом менеджере, так как это скрытый файл.
Теперь, если у нас естьscript.js
файл с таким содержанием:
var a = () => {};
var a = (b) => b;
const double = [1,2,3].map((num) => num * 2);
console.log(double); // [2,4,6]
var bob = {
_name: “Bob”,
_friends: [“Sally”, “Tom”],
printFriends() {
this._friends.forEach(f =>
console.log(this._name + " knows " + f));
}
};
console.log(bob.printFriends());
Бегbabel script.js
выведет следующий код:
var a = function () {};var a = function (b) {
return b;
};
const double = [1, 2, 3].map(function (num) {
return num * 2;
});console.log(double); // [2,4,6]
var bob = {
_name: “Bob”,
_friends: [“Sally”, “Tom”],
printFriends() {
var _this = this;
<span style="color:#66d9ef">this</span>.<span style="color:#a6e22e">_friends</span>.<span style="color:#a6e22e">forEach</span>(<span style="color:#66d9ef">function</span> (<span style="color:#a6e22e">f</span>) {
<span style="color:#66d9ef">return</span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">_this</span>.<span style="color:#a6e22e">_name</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">" knows "</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">f</span>);
});
}
};
console.log(bob.printFriends());
Как видите, все стрелочные функции были преобразованы в функции JavaScript ES5.
Пресеты Babel
Мы только что видели в предыдущей статье, как можно настроить Babel для переноса определенных функций JavaScript.
Вы можете добавить гораздо больше плагинов, но вы не можете добавлять функции конфигурации один за другим, это непрактично.
Вот почему Babel предлагаетпредустановки.
Самые популярные пресеты:env
иreact
.
Совет: Babel 7 устарел (и удален) из годовых пресетов, таких как
preset-es2017
, и предварительные настройки сцены. Использовать@babel/preset-env
вместо.
env
предустановка
Вenv
пресет очень хорош: вы говорите ему, какие среды вы хотите поддерживать, и он все делает за вас,поддержка всех современных функций JavaScript.
Например, «поддерживать последние 2 версии каждого браузера, но для Safari давайте поддерживать все версии, начиная с Safari 7».
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
}
}]
]
}
или «Мне не нужна поддержка браузера, просто позвольте мне поработать сNode.js6,10 ”
{
"presets": [
["env", {
"targets": {
"node": "6.10"
}
}]
]
}
react
предустановка
Вreact
preset очень удобен при написании приложений на React: добавлениеpreset-flow
,syntax-jsx
,transform-react-jsx
,transform-react-display-name
.
Включив его, вы все готовы к разработке приложений React с преобразованиями JSX и поддержкой Flow.
Подробнее о пресетах
https://babeljs.io/docs/plugins/
Использование Babel с веб-пакетом
Если вы хотите запустить современный JavaScript в браузере, одного Babel недостаточно, вам также необходимо связать код. Webpack - идеальный инструмент для этого.
СОВЕТ: прочтитеруководство по веб-пакетуесли вы не знакомы с веб-пакетом
Современному JS требуется два разных этапа: этап компиляции и этап выполнения. Это связано с тем, что для некоторых функций ES6 + требуется полифил или помощник во время выполнения.
Чтобы установить функциональность среды выполнения полифиллов Babel, запустите
npm install @babel/polyfill \
@babel/runtime \
@babel/plugin-transform-runtime
Теперь в твоемwebpack.config.js
добавить файл:
entry: [
'babel-polyfill',
// your app scripts should be here
],
module: {
loaders: [
// Babel loader compiles ES2015 into ES5 for
// complete cross-browser support
{
loader: ‘babel-loader’,
test: /.js$/,
// only include files present in the src
subdirectory
include: [path.resolve(__dirname, “src”)],
// exclude node_modules, equivalent to the above line
exclude: /node_modules/,
query: {
// Use the default ES2015 preset
// to include all ES2015 features
presets: [‘es2015’],
plugins: [‘transform-runtime’]
}
}
]
}
Сохраняя информацию о пресетах и плагинах внутриwebpack.config.js
файла, мы можем избежать.babelrc
файл.
Больше руководств по инструментам разработчика:
- Знакомство с Йоманом
- Bower, менеджер пакетов браузера
- Введение в тестирование веб-интерфейса
- Использование node-webkit для создания настольного приложения
- VS Code: используйте настройки для конкретного языка
- Введение в Webpack
- Краткое и простое руководство по Вавилону
- Введение в пряжу
- Обзор инструментов разработчика браузера
- Отформатируйте свой код с помощью Prettier
- Держите свой код в чистоте с ESLint
- Список интересных советов и приемов Chrome DevTools
- Тестирование JavaScript с помощью Jest
- Как использовать код Visual Studio
- Введение в Электрон
- Посылка, более простой веб-пакет
- Справочник Emmet для HTML
- Двигатель JavaScript V8
- Настройка VS Code
- Настройка командной строки macOS
- Как отключить правило ESLint
- Как открыть VS Code из командной строки
- Как настроить горячую перезагрузку на Electron