Тупо не понимаете конфигурацию Babel?

внешний интерфейс

Frontier: Происхождение статьи заключается в том, что друг сказал Шуцзяну, что в процессе решения проекта, совместимого с браузером IE11, он столкнулся с «ослепительными» конфигурациями Babel и плагинами и т. д., и он не мог отличить конфигурации, и он не знал, как обратиться к плагину babel.Чтобы улучшить производительность, если у вас также есть сомнения по этому поводу, эта статья может быть вам подойдёт

1.babel

Что такое вавилон? Babel по сути редактор, то есть роль «переводчика».Например, Соус не понимает по-испански, и мне нужен кто-то, кто поможет мне перевести его на китайский. Затем Babel помогает браузеру перевести, чтобы веб-приложение могло работать в старой версии браузера.Например, браузер IE11 не поддерживает синтаксис ES6, такой как Promise, тогда, когда вы открываете веб-приложение, которое вы написали в IE11 в на этот раз приложение не может работать нормально.В это время Babel нужен для «перевода» во что-то, что может понять IE11

1.1 Как работает Вавилон?

По сути один только Babel не может сделать "перевод", как например на примере официального сайтаconst babel = code => code;Без наличия подключаемого модуля Babel выходные данные не будут «переводить» стрелочную функцию. Если вы хотите выполнить ее, вам необходимо использовать подключаемый модуль. Нажмите, чтобы получить дополнительные сведения.официальная документация

Принцип работы Babel состоит из трех шагов: синтаксический анализ, преобразование и вывод, как показано ниже.

1.2 Что такое АСТ?

👨‍🎓 Ах Бин: Что такое абстрактное синтаксическое дерево AST, упомянутое выше?

Ответ: Как мы упоминали выше, Babel преобразует код в абстрактное синтаксическое дерево AST при синтаксическом анализе, которое по сути является абстрактным представлением синтаксической структуры кода, и выражает свою синтаксическую структуру в виде древовидной структуры. заключается в том, что его языковая форма не отражена в исходном коде

Ниже приведены некоторые сценарии применения AST при разработке клиентских проектов:

  • Vue模版解析: Мы обычно пишем.vueфайл черезvue-template-compilerАнализ, файл .vue обрабатывается как AST
  • Babel的“翻译”: Если ES6 конвертируется в ES5 процесс в AST
  • webpack的插件UglifyJS:uglifyjs-webpack-pluginИспользуемый для сжатия ресурсов, uglifyjs столкнется с необходимостью анализа грамматики es6, и этот процесс по существу основан наbabel-loader

Вы можете установить через локальную установкуbabel-cliСделайте проверку, скомпилируйте файл js через babel-cli и поиграйте с «переводом».

🌲 Рекомендуем к прочтению:

1.3 Что мне нужно знать, чтобы разработать собственный плагин для Babel?

👨‍🎓 Ах Кэ: Шуцзян, что мне нужно использовать для разработки плагина Babel с использованием AST?

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

  • @babel/parser: синтаксический анализатор babel преобразует исходный код в AST
  • @babel/generator: Декодировать AST для создания нового кода js.
  • @babel/traverse : Используется для обхода дерева AST, может использоваться для преобразования AST~, например, для замены или добавления исходных узлов AST.
  • @babel/core: включает в себя весь рабочий процесс Babel

Ниже приведена простая демонстрация "перевода"~

👦: А Куан: Ты не сказал@babel/parserОн также анализирует исходный код в AST? Зачем@babel/coreСлишком?

Ответ: @babel/core содержит весь рабочий процесс babel.В процессе разработки плагинов, если каждый API вводится отдельно, не будет ли это обманом~ Так что есть плагин @babel/core, судя по названию предполагает, что это основной плагин, он инкапсулирует базовые плагины (включая синтаксический анализатор, генератор и т. д.), повышает эффективность разработки оригинальных плагинов, упрощает процесс и является «сегментом семейства KFC». "

🌲 Рекомендуем к прочтению:

1.4 Связанный плагин Babel

После разговора об основном использовании Babel, давайте поговорим о подключаемых модулях.Как упоминалось выше, полагаться только на Babel «трудно, чтобы стать отличным инструментом», и для достижения доминирующего положения требуется помощь подключаемых модулей. -ins работают?

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

1.4.1 Использование плагинов

Прежде чем сообщить Babel, что делать, нам нужно создать файл конфигурации.babelrc или файл babel.config.js

если я хочу поставитьes2015Синтаксис конвертирован в es5 и цепочку написания, которая поддерживает es2020, я могу писать так

Как показано на картинке выше 👆, мы видим, что настраиваем две вещиpresentа такжеplugin

👨‍🎓 Ах Ке: Разве для перевода Babel не нужны только плагины, что это за подарок?

Ответ: пресеты есть пресеты, например: однажды соус из дерева пойдет в KFC, чтобы купить куриные крылышки, картофель фри, колу, гамбургеры. Затем я обнаружил, что есть пакет А, который включает в себя (картофель фри, кола, гамбургер), тогда эта презентация эквивалентна пакету А, он содержит несколько наборов плагинов, большой пакет, поэтому мне нужен только один пакет А + курица крылья, чтобы сделать это, не настраивая множество плагинов.

Это похоже на вышеупомянутый «пакет» ES2015, на самом деле у команды Babel будет много ES2015.pluginsсбор вbabel-preset-es2015перейти к предустановке

👧 Одноклассник А Ци: @babel/preset-env что это? Я вижу, что многие конфигурации Babel имеют

Ответ: @babel/preset-env Это настоящий пресет, другими словами, «роскошный пакет», включающий набор ряда плагинов, в том числе наши часто используемые es2015, es2016, es2017 и другие последние плагины преобразования синтаксиса, позволяющие Мы используем новейший синтаксис js, такой как let, const, стрелочные функции и т. д., но не включаем плагины stage-x. Другими словами, он включает в себя то, о чем мы говорили выше.es2015, это "семейное ведро", а не просто пакет.

1.4.2 Настроить настоящее

👦 А Бин: Шу Цзян, можно я сам сделаю предустановленную презентацию?

Ответ: Да, но вы можете создать новый проект с Конвенцией именования Babel-Preset- *, затем создайте Packjson и установить зависимости для фиксатора и файл index.js для экспорта .babelrc, и, наконец, опубликовать его на NPM, как следует

1.4.3 О полифилле

Например, когда мы используем его в разработке, мы будем использовать некоторые новые функции es6, такие какArray.fromи т. д., но не все среды JavaScript поддерживают Array.from.В настоящее время мы можем использовать «черную технологию» Polyfill (заполнение кода, что также можно перевести как патч совместимости), потому что babel преобразует только новый синтаксис js, такой как стрелочные функции и т. д., но не преобразовывать новые API, такие как глобальные объекты, такие как Symbol и Promise.@babel/polyfill, установите все новые функции es, шаги следующие

  • npm 安装 : npm install --save @babel/polyfill
  • 文件顶部导入 polyfill: import @babel/polyfilll

🙅‍♂️: Недостаток: Глобально импортировать весь пакет полифилла.Например, промисы будут внедрены глобально, загрязняя глобальную среду, поэтому не рекомендуется его использовать.Есть ли способ лучше? Вы можете напрямую использовать @babel/preset-env и изменить конфигурацию, потому что@babel/preset-envсодержит@babel/polyfillплагин, см. следующий раздел

1.4.4 Как оптимизировать конфигурацию, изменив @babel/preset-env

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

@babel/preset-envнейтральный@babel/polyfillЕсть два соответствующих параметра:

  • targets: список поддерживаемых целевых браузеров
  • useBuiltIns: Параметр имеет три значения: «Запись», «Использование» и false. Значение по умолчанию является ложным, этот параметр определяет, как обрабатывать @ Babel / Polyfilll оператор, когда Babel упакован

Основной разговор оuseBuiltInsРазличаются следующие конфигурации:

  • entry: удалить модули полифилла, уже поддерживаемые целевым браузером, и импортировать те, которые не поддерживаются браузером, в соответствующие модули полифилла.

  • usage: При упаковке, в соответствии с фактическим использованием кода, некоторые модули полифилла фактически используются в импортированном коде в сочетании с целевыми объектами.

  • false: Модуль полифилла не будет автоматически импортирован, а модуль полифилла будет экранирован.

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

1.4.5 Как использовать babel для упаковки webpack?

для@babel/core,@babel/preset-env,@babel/polyfillВ ожидании этих плагинов, когда мы используем webpack для упаковки, как дать знать webpack для компиляции js в соответствии с этими правилами. тогда нужноbabel-loaderТеперь это эквивалентно промежуточному мосту, который сообщает веб-пакету, что делать, вызывая API в babel/core.

1.4.6 Библиотека средств разработки, как избежать загрязнения окружающей среды при использовании babel?

👦 А Бин: Я разработал библиотеку инструментов, а также использовал babel.Если я использую полифилл, как я могу избежать загрязнения окружающей среды, вызванного его использованием?

Ответ: При разработке библиотек инструментов или библиотек компонентов больше нельзя использовать babel-polyfill, иначе это может привести к глобальному загрязнению, можно использовать babel-polyfill@babel/runtime. Это не загрязнит ваш оригинальный метод. Когда он встретит метод, который нужно преобразовать, у него будет другое имя, иначе он напрямую повлияет на бизнес-код, использующий библиотеку.@babel/runtimeв основном в

  • Это может уменьшить объем библиотек и наборов инструментов и избежать ситуации, когда функции инструментов, скомпилированные babel, повторяются в каждом модуле.
  • без использования@babel/runtimeРаньше библиотеки и наборы инструментов обычно не импортировали полифиллы напрямую. В противном случае глобальные объекты, такие как Promises, будут загрязнять глобальное пространство имен, требуя, чтобы пользователи библиотеки предоставляли свои собственные полифиллы. Эти полифиллы обычно упоминаются в инструкциях по использованию библиотек и инструментов.Например, многим библиотекам потребуются полифиллы для es5. После использования babel-runtime библиотекам и инструментам нужно только добавить зависимости к babel-runtime в package.json и передать их в babel-runtime для импорта полифиллов.

Как использовать @babel/runtime

  • 1. установка нпм
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
  • 2. Конфигурация

1.5 Пункты, которые сбивают с толку о Babel

1.5.1 Разница между babel-core и @babel/core

👦: Чувак: В чем разница между babel-core и @babel/core?

Ответ; @babel был предложен в версии для babel7, что похоже на использование @vue/cli после обновления vue-cli, поэтому версии после babel7 используют@babelобъявить область действия в начале,

2. Конфигурация Babel, связанная с Vue

Продолжение следует..

🌲Предыдущие статьи Соуса:

Пожалуйста, выпейте 🍵 Не забудьте подключиться три раза~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья размещена на GithubfrontendThingsСпасибо, Стар✨

Категории