Привет народ! В последнее время меня интересовало, что такого шума вокруг экосистемы 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')] } } } ] }
Этот загрузчик также поддерживает другие параметры, зависящие от загрузчика:
- cacheDirectory
- cacheIdentifier
- .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