Создание веб-сайтов, хорошо работающих во всех основных браузерах, является ключевым принципом открытой веб-экосистемы. Однако это означает дополнительную работу по обеспечению поддержки всего написанного вами кода в каждом целевом браузере. Если вы хотите использовать новые возможности языка JavaScript, вам необходимо транспилировать эти возможности в обратно совместимые форматы для браузеров, которые их не поддерживают.
Babel — наиболее широко используемый инструмент для компиляции кода, содержащего новый синтаксис, в код, понятный различным браузерам и средам (например, Node). В этом руководстве предполагается, что вы используете Babel, поэтому вам необходимо следовать инструкциям по настройке , чтобы включить его в ваше приложение, если вы еще этого не сделали. Выберите webpack в Build Systems если вы используете webpack в качестве сборщика модулей в вашем приложении.
Чтобы использовать Babel для транспиляции только того, что необходимо вашим пользователям, вам нужно:
- Укажите, на какие браузеры вы хотите ориентироваться.
- Используйте
@babel/preset-envс соответствующими целевыми браузерами. - Используйте
<script type="module">, чтобы прекратить отправку транспилированного кода в браузеры, которым он не нужен.
Определите, на какие браузеры вы хотите ориентироваться.
Прежде чем приступать к изменению способа транспиляции кода в вашем приложении, необходимо определить, какие браузеры используют ваше приложение. Проанализируйте, какие браузеры используют ваши пользователи и на какие вы планируете ориентироваться, чтобы принять обоснованное решение.
Используйте @babel/preset-env
Транспиляция кода обычно приводит к созданию файла большего размера, чем его исходная версия. Минимизируя объем компиляции, можно уменьшить размер пакетов и тем самым повысить производительность веб-страницы.
Вместо включения отдельных плагинов для выборочной компиляции используемых языковых функций, Babel предоставляет ряд предустановок, объединяющих плагины. Используйте `@babel/preset-env`, чтобы включить только те преобразования и полифилы, которые необходимы для целевых браузеров.
Добавьте @babel/preset-env в массив presets в вашем конфигурационном файле Babel ` .babelrc :
{
"presets": [
[
"@babel/preset-env",
{
"targets": ">0.25%"
}
]
]
}
Используйте поле targets , чтобы указать, какие версии браузеров вы хотите включить, добавив соответствующий запрос в поле browsers . @babel/preset-env интегрируется с browserslist, конфигурационным файлом с открытым исходным кодом, используемым различными инструментами для выбора целевых браузеров. Полный список совместимых запросов находится в документации browserslist . Другой вариант — использовать файл .browserslistrc для перечисления сред, которые вы хотите выбрать в качестве целевых.
Значение ">0.25%" указывает Babel включать только те преобразования, которые необходимы для поддержки браузеров, на долю которых приходится более 0,25% мирового использования. Это гарантирует, что ваш пакет не будет содержать ненужный транспилированный код для браузеров, используемых очень небольшим процентом пользователей.
В большинстве случаев это более предпочтительный подход, чем использование следующей конфигурации:
"targets": "last 2 versions"
Значение "last 2 versions" обеспечивает транспиляцию вашего кода для последних двух версий каждого браузера, что означает поддержку устаревших браузеров, таких как Internet Explorer. Это может неоправданно увеличить размер вашего пакета, если вы не планируете использовать эти браузеры для доступа к вашему приложению.
В конечном итоге, вам следует выбрать подходящую комбинацию запросов, чтобы ориентироваться только на те браузеры, которые соответствуют вашим потребностям.
Включить современные исправления ошибок
@babel/preset-env группирует несколько синтаксических особенностей JavaScript в коллекции, включая и отключая их в зависимости от указанных целевых браузеров. Хотя это хорошо работает, целая коллекция синтаксических особенностей преобразуется, если в целевом браузере обнаружена ошибка, связанная всего с одной особенностью. Это часто приводит к преобразованию большего количества кода, чем необходимо.
Изначально разработанная как отдельный пресет , опция bugfixes в @babel/preset-env решает эту проблему, преобразуя современный синтаксис, который не работает в некоторых браузерах, в наиболее близкий эквивалентный синтаксис, который не работает в этих браузерах. В результате получается практически идентичный современный код с несколькими небольшими изменениями синтаксиса, гарантирующими совместимость во всех целевых браузерах. Чтобы использовать эту оптимизацию, убедитесь, что у вас установлен @babel/preset-env 7.10 или более поздней, затем установите свойство bugfixes в true :
{
"presets": [
[
"@babel/preset-env",
{
"bugfixes": true
}
]
]
}
В Babel 8 опция bugfixes будет включена по умолчанию.
Используйте <script type="module">
Модули JavaScript, или модули ES, — это относительно новая функция, поддерживаемая всеми основными браузерами . Вы можете использовать модули для создания скриптов, которые могут импортировать и экспортировать данные из других модулей, а также использовать их с @babel/preset-env чтобы ориентироваться только на браузеры, которые их поддерживают.
Вместо того чтобы запрашивать информацию о конкретных версиях браузеров или доле рынка, рассмотрите возможность указания параметра "esmodules" : true в поле targets вашего файла .babelrc .
{
"presets":[
[
"@babel/preset-env",
{
"targets":{
"esmodules": true
}
}
]
]
}
Многие новые функции ECMAScript, скомпилированные с помощью Babel, уже поддерживаются в средах, поддерживающих модули JavaScript. Таким образом, вы упрощаете процесс обеспечения использования только транспилированного кода для браузеров, которым он действительно необходим.
Браузеры, поддерживающие модули, игнорируют скрипты с атрибутом nomodule . И наоборот, браузеры, не поддерживающие модули, игнорируют элементы скрипта с type="module" . Это означает, что вы можете включить как модуль, так и скомпилированный резервный вариант.
В идеале, скрипты двух версий приложения должны быть включены следующим образом:
<script type="module" src="main.mjs"></script>
<script nomodule src="compiled.js" defer></script>
Браузеры, поддерживающие модули, загружают и выполняют файл main.mjs и игнорируют compiled.js . Браузеры без поддержки модулей поступают наоборот.
Если вы используете webpack, вы можете задать разные цели в конфигурации для двух разных версий вашего приложения:
- Версия только для браузеров, поддерживающих модули.
- Версия, включающая скомпилированный скрипт, работающий в любом устаревшем браузере. Размер файла больше, поскольку транспиляция должна поддерживать более широкий спектр браузеров.
Благодарим Коннора Кларка и Джейсона Миллера за их отзывы.