[Внешний словарь] Что вы должны знать о Вавилоне

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

предисловие

В первый раз, когда я открыл поисковик информации о Бабеле, это оказалась легенда о Бабеле. Потом я потратил небольшой день, чтобы разобраться в этой легенде (из "Ветхого Завета").

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

Разобравшись с этим мифом, я позже узнал некоторые знания о Вавилоне, и следующая тема.

Контент был опубликован вgitHubТеперь добро пожаловать в Star, больше статей на gitHub.

Что такое Вавилон

Официальная документация Babel:babeljs.io/

Мы знаем, что браузеры поддерживают разные версии JavaScript, и есть много замечательных новых синтаксисов, которые не работают непосредственно в браузере. Для решения этой проблемы «недопонимания» есть Babel, появление Babel позволяет нам использовать синтаксис ES6+ без каких-либо угрызений совести.

Babel is a JavaScript compiler.

Это также является предпосылкой того, почему мы должны использовать синтаксис ES6+.

Если вы еще не знаете синтаксиса ES6+, изучите его сейчас, иначе вы просто пойдете домой и унаследуете миллиарды долларов.

Как компилируется Babel

Взгляните на картинку ниже:

Вы обнаружите, что синтаксис ES6 действительно скомпилирован в версию, которую может распознать браузер.Вы также спрашиваете, как это сделать?

Этапы компиляции babel

Babel делится на три этапа: анализ, преобразование и генерация.

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

Плагин - носитель трансформации

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

пример:

// 模板字面量
const name = '小生方勤';
let hello = `hello ${name}`;

Выше приведен пример простого литерала шаблона. Мы знаем, что это новая функция ES6. Этот код сообщит об ошибке на платформе, которая не поддерживает ES6, поэтому нам нужен Babel, чтобы скомпилировать его в код ES5.

Итак, нам нужно настроить Babel следующим образом:

// .babelrc 文件
{ 
  "plugins": [
    "transform-es2015-template-literals"  // 转译模版字符串的 plugins
  ],
  "presets": ["env", "stage-2"]
}

пресет (т.е. набор предустановленных плагинов)

пресет: пресет для коллекции плагинов babel, включая некоторые плагины. Очевидно, что настраивать плагины один за другим, как описано выше, будет очень хлопотно.Для удобства Babel предоставляет нам элемент конфигурации, который называется persets (предустановка).

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

Порядок выполнения как плагинов, так и пресетов

  1. Сначала выполните элементы конфигурации плагинов, а затем выполните элементы конфигурации Preset;
  2. Элементы конфигурации плагинов выполняются в порядке их объявления;
  3. Предустановленные элементы конфигурации, выполняемые в порядке, обратном объявлению.

Порядок выполнения кода, включенного в следующее:

  1. transform-es2015-template-literals
  2. stage-2
  3. env
// .babelrc 文件
{ 
    "plugins": [
        "transform-es2015-template-literals",  // 转译模版字符串的 plugins
    ],
    "presets": [
        ["env", {
            // 是否自动引入 polyfill，开启此选项必须保证已经安装了 babel-polyfill
            // “usage” | “entry” | false, defaults to false.
            "useBuiltIns": "usage"
        }], "stage-2"]
}

Давайте поговорим о конфигурации useBuiltIns здесь

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

Но установив"useBuiltIns": "usage"Он может извлекать части, необходимые для использования в babel-polyfill, и удалять ненужные.

Описание параметра useBuiltIns:

  1. false: ничего не делать с полифиллами
  2. запись: В соответствии с поддержкой версии браузера в таргете, полифиллы разделены и введены, и введены только те полифиллы, которые не поддерживаются браузером.
  3. использование (новое): обнаружение использования ES6/7/8 и т. д. в коде и загрузка только тех полифилов, которые используются в коде.

Краткое описание модулей, связанных с Babel

Студенты, знакомые с Babel, не думаете ли вы, что модулей слишком много? Я чувствовал это, когда начал учиться. Фактически каждый модуль выполняет свою функцию.

вавилонское ядро ​​(ядро)

Этот модуль лучше всего, как следует из названия, основной модуль Babel. Основной API Babel находится в этом модуле. То есть этот модуль абстрагирует код js, который мы пишем, в дерево AST, а затем анализирует переведенное содержимое плагинов в код js.

Я не буду вдаваться в подробности о том, как это работает здесь, потому что я тоже не знаю.

babel-cli

Официальная документация babel-cli:Вавилон — это .IO/docs/en/daddy…

babel-cli — это инструмент для преобразования файлов js из командной строки.

Конечно, мы обычно не используем этот модуль, потому что обычно мы не делаем эту работу вручную, и эта работа в основном интегрирована в модульные инструменты управления, такие как веб-пакет, Rollup и т. д.

Простой в использовании (сначала необходимо установить babel-cli):

babel test.js -o compiled.js

babel-node

babel-node является частью babel-cli, поэтому он также устанавливается при установке babel-cli.

Это позволяет ES6+ работать непосредственно в среде узла.

babel-polyfill (интегрирует core-js и регенератор внутри)

Babel не может конвертировать некоторые новые API, такие как глобальные объекты, такие как Generator, Set, Proxy и Promise, а также некоторые новые методы: include, Array.form и т. д. Поэтому в настоящее время необходимы некоторые инструменты для обеспечения совместимости с браузерами.

Определение официального веб-сайта: babel-polyfill предназначен для имитации полной среды ES6+, предназначенной для использования в приложениях, а не в библиотеках/инструментах.

У babel-polyfill есть два основных недостатка:

  1. Использование babel-polyfill приведет к очень большим пакетам, многие из которых на самом деле не используются, что является пустой тратой ресурсов.
  2. babel-polyfill может загрязнять глобальные переменные и изменять цепочку прототипов многих классов, которая имеет неконтролируемые факторы.

Из-за двух вышеуказанных проблем в Babel7 был добавлен babel-preset-env, мы установили"useBuiltIns": "usage"С этим значением параметра babel-polyfill может загружаться по запросу.

babel-runtime & babel-plugin-transform-runtime

При использовании Babel6 в файле .babelrc будет использоваться babel-plugin-transform-runtime, а зависимости в package.json также включают babel-runtime, потому что при использовании babel-plugin-transform необходимо использовать babel-plugin-transform-runtime. -runtime.runtime как зависимость.

Конфигурация .babelrc:

{
  "presets": [
    ["env"]
  ],
  "plugins": [
    ["transform-runtime", {
      "helpers": false, // defaults to true
      "polyfill": false, // defaults to true
      "regenerator": true, // defaults to true
      "moduleName": "babel-runtime" // defaults to "babel-runtime"
    }]
  ]
}

После того, как мы включим плагин babel-plugin-transform-runtime, Babel будет использовать функции инструмента из babel-runtime, чтобы переписать некоторые функции, которые не поддерживаются браузерами, а затем использовать их в проекте.

Babel-runtime также интегрирует core-js, регенератор, помощники и т. д.

Благодаря механизму песочницы этот подход не загрязняет глобальные переменные и не модифицирует прототип встроенного класса, поэтому возникнет проблема повторных ссылок.

Теперь лучше всего установить «useBuiltIns»: «использование» в babel-preset-env и импортировать полифиллы по мере необходимости.

Сравнение трех вариантов

строить планы преимущество недостаток
@babel/runtime & @babel/plugin-transform-runtime Вводится по запросу, небольшой размер упаковки Несовместим с методами экземпляра
@babel/polyfill Полное моделирование среды ES2015+ Упаковка слишком велика, загрязняя глобальные объекты и встроенные прототипы объектов.
@babel/preset-env Представлено по запросу, высокая конфигурируемость Сяошэн не знает -_-

Некоторые изменения в babel7

Изменения в пресетах:

Откажитесь от es201x, удалите stage-x, порекомендуйте env

Если вы все еще используете es201x, официально рекомендуется использовать env.Выход на пенсию - это не удаление, это просто устарело.

Но stage-x был удален напрямую, а это значит, что использование es201X в babel7 сообщит об ошибке.

изменение имени пакета

Критическое изменение в Babel 7, переименование всех babel-* в @babel/*,

Например:

  1. бабел-кли —> @babel/cli.
  2. babel-preset-env —> @babel/preset-env

Старые версии узла больше не поддерживаются

Babel 7.0 больше не поддерживает четыре версии nodejs 0.10, 0.12, 4, 5, что эквивалентно требованию nodejs >= 6.

Также есть некоторые изменения в пакетах, которые не зависят от других пакетов и т.д.

О том, как настроить Babel

Далее я напишу специальную статью о настройке среды разработки, то есть функции самостоятельной сборки скаффолдинга, поэтому как настроить Babel здесь упоминать не буду.

наконец

Если вы хотите присоединиться к [группе Big Front-end Exchange Group], подпишитесь на официальную учетную запись и нажмите «Общение и группа», чтобы добавить робота, который автоматически привлечет вас в группу. Следуйте за мной, чтобы получать последние галантерейные товары в первый раз.

Категории