Краткое и простое руководство по Вавилону

Babel - отличная запись в наборе инструментов для веб-разработчиков. Это потрясающий инструмент, и он существует уже довольно давно, но в настоящее время почти каждый разработчик JavaScript полагается на него, и это будет продолжаться, потому что 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 из коробки ничего полезного не делает, нужно его настраивать и добавлять плагины.

Вот список плагинов 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`предустановка

Вreactpreset очень удобен при написании приложений на 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файл.