Привет народ! В последнее время меня интересовало, что такого шума вокруг экосистемы React. Эрик Эллиот сказал:

Во-первых, программное обеспечение съело мир, сеть съела программное обеспечение, а JavaScript съел сеть. В 2018 году React съедает JavaScript.

Скорее React ест JQuery. :П

Как бы то ни было, я настраивал проект React с нуля, и одной из сложных задач, с которыми я столкнулся, было написание файла. babelrc. Я не хотел делать здесь ксерокопирование из какого-то блога или сообщения.

Этот пост поможет разобраться и настроить Babel в среде webpack и npm.

Babel - это инструмент для транспиляции (компиляции) кода ES6 / ES7 в код ECMAScript 5, который можно использовать сегодня в любом современном браузере. Кроме того, в Babel есть расширения для транспиляции JSX для React и синтаксиса Flow для проверки статического типа.

Надеясь, что babel уже установлен, давайте продолжим установку babel-loader, преобразователя файлов. jsx в ваш веб-пакет, в качестве devDependency в package.json.

npm install babel-loader --save-dev

В webpack.config.js вам нужно добавить babel-loader в список модулей:

module: {
  rules: [
    {
      test: /\.jsx$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
},

Вы можете передать параметры загрузчику, используя свойство options:

module: {
  rules: [
    {
      test: /\.jsx$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
        options: {
          presets: ['@babel/preset-env'],
          plugins: [require('@babel/plugin-proposal-object-rest-     spread')]
        }
      }
    }
  ]
}

Этот загрузчик также поддерживает другие параметры, зависящие от загрузчика:

  1. cacheDirectory
  2. cacheIdentifier
  3. .babelrc

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

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

Начнем с создания файла и добавления кода:

{
    "presets": []
}

Теперь давайте начнем говорить Babel о необходимости переноса кода ES6 / es2015 в ES5. Изначально babel предлагал es2015 preset, который позволяет babel переносить все функции es2015, если они присутствуют в файле. Затем появился последний пресет, который сейчас устарел, так как он такой же, как и предустановка env. env preset содержит все годовые предварительные настройки, поэтому пользователям не нужно указывать каждый из них индивидуально. В настоящее время он включает es2017, es2016, es2015. В документации Babel говорится:

Если вы хотите оставаться в курсе, используйте предустановку `env` для es6

Установим:

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

Затем Babel необходимо преобразовать JSX в вызовы createElement. Давайте установим пресет react для того же:

npm install babel-preset-react --save-dev

Давайте добавим два набора настроек в .babelrc:

{
    "presets": ["env", "react"]
}

Отлично, мы в порядке. Посмотрите сами на волшебство Вавилона. ;)

Теперь мы будем говорить о расширенных конфигурациях Babel.

Предустановка Babel содержит только функцию ES6. В JavaScript есть несколько предложений по новым функциям, которые еще не доработаны. Они разделены на 5 состояний (от 0 до 4). По мере того, как предложения набирают обороты и с большей вероятностью будут приняты в стандарт, они проходят через различные этапы и, наконец, принимаются в стандарт на этапе 4.

В Babel эти изменения объединены в 4 разных пресета:

  • babel-preset-stage-0
  • babel-preset-stage-1
  • babel-preset-stage-2
  • babel-preset-stage-3

Нет babel-preset-stage-4, просто babel-preset-es2015.

Для каждой из этих предустановок требуется более поздняя предустановка. Например, babel-preset-stage-1 требует babel-preset-stage-2 и babel-preset-stage-3.

Просто установите сцену, которую хотите использовать:

npm install babel-preset-stage-0 --save-dev

Затем добавьте его в .babelrc:

{
    "presets": ["env", "react", "stage-0"]
}

Babel предупреждает, что все, что было до stage-3, следует использовать с осторожностью.

У некоторых предустановок также есть параметры для настройки. Подробнее об этом Прочтите.

Например, если вы хотите настроить таргетинг только на Chrome 52 и отключить преобразование синтаксиса модуля ES6 в другой тип модуля:

{
  "presets": [
    ["env", {
      "targets": {
        "chrome": 52
      },
      "modules": false
    }],
    "react"
  ]
}

Добавление плагинов в .babelrc

Пресеты Babel - это просто наборы предварительно настроенных плагинов. Вы можете добавить плагины вручную, если хотите сделать что-то другое.

Например: давайте добавим подключаемый модуль transform-class-properties . Этот плагин преобразует свойства статического класса es2015, а также свойства, объявленные с помощью синтаксиса инициализатора свойств es2016.

Ниже приведен пример из документации Babel, класс с четырьмя свойствами класса, которые будут преобразованы:

class Bork {
  //Property initializer syntax
  instanceProperty = "bork";
  boundFunction = () => {
    return this.instanceProperty;
  }
  //Static class properties
  static staticProperty = "babelIsCool";
  static staticFunction = function() {
    return Bork.staticProperty;
  }
}
let myBork = new Bork;

//Property initializers are not on the prototype.
console.log(myBork.__proto__.boundFunction); // > undefined

//Bound functions are bound to the class instance.
console.log(myBork.boundFunction.call(undefined)); // > "bork"

//Static function exists on the class.
console.log(Bork.staticFunction()); // > "babelIsCool"

Установим:

npm install babel-plugin-transform-class-properties --save-dev

И настройте его:

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties"
  ],
}

Вавилон на основе окружающей среды

В Babel есть плагины, которые могут помочь вам в процессе разработки, как плагины для оптимизации кода для производства. Вы можете настроить, какие плагины загружать, в зависимости от вашей среды:

{
    "presets": ["env", "react"],
    "env": {
        "development": {
            "plugins": [...]
        },
        "production": {
            "plugins": [...]
        }
    }
}

Текущая среда будет использовать process.env.BABEL_ENV. Если BABEL_ENV нет, будет использоваться process.env.NODE_ENV. Если NODE_ENV тоже недоступен, по умолчанию будет development.

вавилон-полифилл

babel-polyfill будет имитировать полную среду ES6. Например, без полифила следующий код:

function allAdd() {
    return Array.from(arguments).map((num) => num + 2);
}

будет перенесено в:

function allAdd() {
    return Array.from(argument).map(function (num) {
        return num + 2;
    });
}

Этот код не будет работать везде, потому что Array.from поддерживается не всеми браузерами:

Uncaught TypeError: Array.from is not a function

Для решения этой проблемы нам понадобится полифилл. Полифилл - это фрагмент кода, который копирует собственный API, которого нет в текущей среде выполнения. Babel использует core-js как полифил и регенератор для своих генераторов и асинхронных функций.

Чтобы включить полифилл Babel, нам нужно его установить:

npm install babel-polyfill --save-dev

Затем просто включите полифилл в начало любого файла, который этого требует:

import 'babel-polyfill';

Заключение

Поскольку javascript растет и развивается, новые стандарты разрабатываются все более быстрыми темпами. Babel и окружающая его экосистема играют важную роль в современных веб-приложениях и поддержке старых браузеров. Имея предоставленную выше информацию, вы должны быть готовы начать использовать новейшие спецификации JavaScript и сопутствующие технологии (JSX, ES6 и т. Д.). Вавилон собирается остаться здесь надолго, так что…. Включите!

Если вы нашли это полезным, нажмите кнопку 👏.

И да Беспечный !!!!! : D