Просмотрите Babel 6 и 7, чтобы предсказать Babel 8

внешний интерфейс Babel
Просмотрите Babel 6 и 7, чтобы предсказать Babel 8

Первоначально Babel назывался 6to5.Как следует из названия, функция заключается в преобразовании es6 в es5. Мы знаем, что версия es выходит раз в год, с es7 (es2016), es8 (es2017) и так далее. Судя по всему, название 6to5 больше не подходило, поэтому 6to5 сменила название на babel.

вавилон изВавилонская башняАллюзии:

В то время люди объединились, чтобы построить башню, которая надеялась привести к небесам.Чтобы остановить человеческий план, Бог заставил людей говорить на разных языках, чтобы люди не могли общаться друг с другом.План провалился, и с тех пор люди рассеялись. Это событие дает объяснение появлению в мире разных языков и рас. Эта башня - Вавилонская башня.

Этот намек на Вавилонскую башню соответствует позиции переводчика Вавилона.

Процесс компиляции babel

Цель babel была очень ясна с самого начала и до настоящего времени: преобразовать новый синтаксис и API в исходном коде в поддержку целевого браузера. Он использует архитектуру микроядра, весь процесс относительно упрощен, а все функции преобразования выполняются с помощью подключаемых модулей.

Процесс компиляции Babel состоит из трех этапов: синтаксический анализ, преобразование и генерация.

На этапе преобразования применяются различные встроенные плагины для завершения преобразования AST. Преобразование, выполняемое встроенным плагином, включает в себя две части: одна заключается в преобразовании неподдерживаемого синтаксиса в синтаксис, поддерживаемый целевой средой, для достижения той же функции, а другая — в автоматическом введении соответствующего полифилла для неподдерживаемого API.

Процесс компиляции babel и цель не изменились, но то, как они достигли этого великого изменения, мы оглядываемся назад.babel 6,babel 7как они устроены,babel 8Как это сделать, возможно, это поможет вам действительно понять Babel.

babel 6

Стандарт es выпускается один раз в год, а это означает, что за плагином babel нужно следить в режиме реального времени, и каждый год будет внедряться серия плагинов.

Существует также процесс включения новых грамматик и API в стандарт es.Этот процесс разделен на следующие этапы:

  • Этап 0 — Strawman: Просто идея, возможная реализация с помощью плагина Babel.
  • Этап 1 — Предложение: предложения, достойные продолжения
  • Этап 2 - Проект: Секрета
  • Этап 3 — Кандидат: завершите спецификацию и реализуйте ее в браузере.
  • Фаза 4 — завершена: будет добавлена ​​в спецификацию es20xx в следующем году.

Babel может преобразовать так много функций, что каждая функция выполняется с помощью плагина babel. Но есть много функций, то есть есть много плагинов, поэтому пользователи не могут настраивать свои собственные плагины, поэтому в Babel 6 вводится понятие предустановки, которая представляет собой набор плагинов.

Если мы хотим использовать синтаксис es6, мы используем babel-preset-es2015, es7 представляет babel-preset-es2016 и так далее. Если вы хотите использовать функции, которые еще не были добавлены в стандарт, используйте babel-preset-stage0, babel-preset-stage1 и т. д., чтобы представить их соответственно. Таким образом, выбирая различные пресеты и вручную добавляя некоторые плагины, это все преобразования, которые сделает Babel.

Этот процесс можно понимать как процесс объединения множеств.

Результатом объединения являются все поддерживаемые функции.

Таким образом, babel 6 поддерживает настройку различных преобразований функций, которые не поддерживаются целевой средой.

Подумайте об этом, есть ли проблемы с этим подходом?

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

  • Стандарт es меняется каждый год, и текущий этап 0 может вскоре стать этапом 2. Как сохранить пресет, и менять его или нет, как пользователи узнают, какие функции поддерживает этот этап х?

  • Его можно преобразовать только в es5.Целевая среда поддерживает некоторые функции es6, так что эти преобразования и полифиллы бесполезны? Это также увеличивает объем продукта.

  • Ручное введение полифилла хлопотно, есть ли лучший способ?

Эти две проблемы существовали всегда, начиная с Babel 6. Так что эта схема считается проходимой, но проблемы все же есть.Поставим 70 баллов, что не так уж и много. (Если вы можете выполнить функцию, вы можете дать 60 баллов, а дополнительные 10 баллов — это предустановка, введенная для babel 6, которая действительно упрощает настройку)

Так как решить проблему Babel 6? Бабел 7 имеет ответ.

babel 7

Babel 7 сильно изменился, например, все пакеты были перенесены в область видимости @babel, то есть @babel/xxx, нас это не волнует, просто посмотрите, как babel 7 решает проблему babel 6.

В Babel 7 отказались от предустановленных пакетов preset-20xx и preset-stage-x и заменили их на preset-env.По умолчанию preset-env поддерживает все стандартные функции es.Вручную укажите plugin-proposal-xxx.

Его коллекция выглядит так:

Это проще, чем Babel 6.

(preset-react и т. д. не является стандартным синтаксисом es, и изменений нет, поэтому он не включен).

Но смена пресета и предложение плагина просто решили проблему, связанную с тем, что предыдущий пресет часто менялся. Так много преобразованных функций, поддерживаемых средой, как решить эту проблему?

Ответ — таблица совместимости, в которой указана минимальная поддерживаемая версия каждой функции в различных браузерах или средах узлов, на основе которой Babel ведет базу данных.@babel/compat-dataВниз.

Есть данные о том, какую версию каждая фича поддерживает в разных средах:

С этими данными, если пользователь указывает, какова его целевая среда, вы можете использовать запрос browserslist для записи, например, последней версии 1, > 1% строк, Babel будет использовать brwoserslist для преобразования их данных в конкретную версию целевая среда.

С данными минимальной версии среды, поддерживаемой различными функциями, и конкретной версии функции, которые не поддерживаются целевой средой, отфильтровываются, а затем могут быть введены соответствующие подключаемые модули. Это то, что делает пресет-env.

Конфигурация, такая как:

{
    "presets": [["@babel/preset-env", { "targets": "> 0.25%, not dead" }]]
}

Это решает проблему преобразования функций, уже поддерживаемых целевой средой, с помощью preset-env. На самом деле полифиллы тоже можно фильтровать по таргетам.

Больше не нужно вводить полифиллы вручную, так как же их вводить? Конечно, он автоматически вводится с помощью preset-env. Однако эта функция не включена по умолчанию и требует настройки.

{
    "presets": [["@babel/preset-env", { 
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "usage",// or "entry" or "false"
        "corejs": 3
    }]]
}

Настройте corejs и useBuiltIns.

  • corejs — это полифилл, используемый babel 7. Вам нужно указать следующую версию.Только corejs 3 поддерживает полифиллы для методов экземпляра (таких как Array.prototype.fill ).

  • useBuiltIns — это способ использования полифилла (corejs), независимо от того, импортируется ли он в точке входа (entry), или импортируется каждым файлом (usage), или не импортируется (false).

Когда эти два параметра настроены, полифилл может быть введен автоматически.

Polyfill импортируется глобально по умолчанию, и иногда вы не хотите загрязнять глобальные переменные, вам нужно использовать @babel/plugin-transform-runtime для его преобразования. (Этот плагин доступен в Babel 6).

Это больше не будет загрязнять глобальную среду, но будет использовать уникальный идентификатор для введения.

Похоже, что Babel 7, кажется, идеален, может играть более 90 очков?

Нет, у Babel 7 есть проблемы с Babel 7.

Проблемы с бабель 7

@babel/plugin-transform-runtime не поддерживает настройку целей, потому что не знает, что поддерживает целевая среда, он может выполнять только все преобразования. Вы могли бы сказать, что preset-env не существует?

Заказ приложений плагинов в Вавиле: первый плагин, а затем предустановите, плагин слева направо, предустановлена ​​справа налево, поэтому плагин-преобразование - выполнение времени представляет собой перед предустановленной средой.

После того, как @Babel/Plugin-Transform-Runtime закончился, было бесполезно конвертировать его в Precle-ENV.

Давайте попробуем:

Давайте посмотрим на поддержку среды Array.prototype.fill:

Вы можете видеть, что эта функция поддерживается в Chrome 45 и выше, но не в Chrome 44.

Давайте попробуем предустановку-env саму по себе:

При указании целей как Chrome 44 полифилл должен импортироваться автоматически:

При указании целей как Chrome 45 не нужно вводить полифилл:

Все результаты были такими, как ожидалось, 44 были введены, а 45 - нет.

Давайте снова попробуем @babel/plugin-transform-runtime:

Вы нашли проблему? Chrome 45 не поддерживает метод Array.prototype.fill? Почему полифилл все еще используется?

Поэтому я пошел спросить автора и упомянулfeature request, автор сказал, что эту проблему можно решить с помощью последнего пакета серии babel polyfill.

Я посмотрел, этот пакет все еще находится в экспериментальной стадии, и он решает проблему.

Этот пакет оценивается в Babel 8, будет встроен в Вавилон.

Так что поставьте оценку Babel 7. Изначально введение preset-env позволяло нам более точно преобразовывать код и вводить полифиллы, я хотел поставить 90 баллов, но проблема с plugin-transform-runtime заставила меня уменьшить его на 10 баллов. Дайте ему 80 баллов.

babel 8

Babel 8 еще не вышел, но мы знаем, что как бы ни обновлялся babel, он будет базироваться на основной линейке, то есть будет автоматически выполнять точное преобразование и полифилл для тех фич, которые не поддерживаются целевой средой . Каждая версия решает проблему предыдущей версии Пакет @babel/polyfills для Babel 8 решает устаревшую проблему @babel/plugin-transform-runtime для Babel 7. Вы можете точно вводить полифиллы по требованию через цели.

Он поддерживает настройку поставщика полифилла, то есть вы можете указать такие полифилы, как corejs2, corejs3, es-shims и т. д., а также вы можете настроить полифил, то есть вы можете использовать свой собственный полифилл.

Затем, после того, как у вас есть источник полифилла, способ использования полифилла также встроен в то, что раньше делала Transform-runtime, то есть от двух предыдущих типов useBuiltIns: entry и useBuiltIns: Usage к трем типам:

  • entry-global: это то же самое, что и предыдущая запись useBuiltIns:, которая предназначена для глобального введения полифилла.

  • использование-запись: это аналог useBuiltIns: использование, которое представляет собой полифилл, введенный конкретным модулем.

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

На самом деле эти три метода поддерживаются и в babel 7, но плагины сейчас уже не нужны, да и конфигурация полифилл-провайдера тоже поддерживается, так что на этапе babel 8 @babel/preset-env вполне работоспособен .

Так что, если плагин хочет использовать цели?

Поскольку недавно я писал буклет «Проверка плагинов Babel», меня больше беспокоило влияние на плагин, поэтому я спросил сопровождающего Babel, нужно ли ему вводить данные в API, когда @babel/core вызывает подключаемый модуль, чтобы подключаемый модуль мог получать цели.

Я спрашивал утром, а днем ​​был приятно удивлен, обнаружив, что документация babel дополняет документацию @babel/helper-compilation-targets. Helper — это способ повторного использования кода между плагинами, то есть библиотека для разработки плагинов.

Я посмотрел, эта библиотека предоставляет 3 API:

  • Запросите версию целевой среды в соответствии с запросом: getTargets
  • Целевая среда фильтра: filterItems
  • Определите, требуется ли плагин: isRequired

В соответствии с потребностями, о которых мы говорили ранееОпределить целевую среду по запросу,ПотомОтфильтровать целевую среду,ПозжеОпределить, является ли плагин3 этапа.

В плагине конфигурация среды получается через api.targets(), а затем isRequired используется для определения необходимости плагина.

Таким образом, будь то реализация встроенного плагина и пресета или API, который может использовать плагин, цели отлично поддерживаются На этом этапе цели действительно интегрированы в Babel.

На данном этапе babel я думаю, что уже могу поставить оценку 90 баллов:

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

вавилонский закон развития

Babel 8 все еще в пути, но мы уже смутно видим, как он будет выглядеть.На самом деле, основная идея Babel не изменилась с самого начала до настоящего времени, как и оригинальное название 6to5, просто дляПреобразуйте или заполните неподдерживаемый синтаксис и API в целевой среде, постарайтесь быть как можно точнее, настройте как можно проще, упростите написание плагинов и сделайте больше..

Итак, для этой цели Babel полностью развился и разработал пресет (Babel 6), Preset-env (Babel 7), поставщик полифилла (Babel 8), среду выполнения plugin-transform (Babel 6) и так далее.

API, помощники и т. д., которые могут использовать плагины, также становятся богаче.

babel постоянно развивается, но цели и суть никогда не меняются. Когда мы что-то изучаем, мы также должны понять его суть, чтобы учиться, поэтому я написал буклет «Коды для очистки плагинов Babel» (скоро появится), надеясь помочь вам «очистить» Babel!

Категории