Практика совместимости браузера Vue Cli

внешний интерфейс Vue.js

доля рынка браузеров

Прежде чем заняться проблемами совместимости браузеров, давайте взглянем на текущую долю рынка браузеров. Данные браузера, извлеченные caniuse, поступают из statCounter.

Мировой

Небесный диапазон

Плюс Мобильный

анализировать

Из статистики видно, что доля отечественных браузеров для ПК, браузера QQ и Sogou по-прежнему довольно высока, поэтому эти два браузера необходимо больше учитывать при обработке совместимости. Однако и браузер QQ, и Sogou инкапсулируют ядро ​​Chrome, и их обновления обычно обновляются с обновлением версии Chrome, но эти два браузера обычно не синхронизируются с последней версией Chrome, но будут иметь определенное отставание, поэтому нам обычно приходится учитывать версию ядра Chrome, которую они используют, когда мы совместимы.

Vue CLI3

Кратко

С выпуском последнего шедевра Youda — Vue CLI3, команда также обновила структуру проекта до последней версии CLI 3. CLI3 предлагает множество новых функций, таких как поддержка webpack4, поддержка визуальной настройки проектов и упаковка многих официальных плагинов. стоимость запуска и т.д. Также имеется поддержка совместимости с браузерами — сочетание новейших инструментов сообщества с современными шаблонами. Обработка совместимости браузера CLI 3.0 в основном разделена на три части. список браузеров, полифилл и современный режим.

Broserslist

Определяет целевую область браузера проекта. Это значение используется такими инструментами, как @babel/preset-env и Autoprefixer, чтобы определить, какие функции JS необходимо транспилировать, а какие функции CSS — с префиксом.

{
  "browserslist": [
      "last 1 version", //表示最新一个版本
  ]
}

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

Ниже приведено объяснение использования

Transpile

Ниже приведен пресет Babel, используемый Vue CLI3 — @Babel/preset-env, который представляет собой инструмент, помогающий Babel транспилировать в CLI 3. Говоря о Babel, мы должны упомянуть транслитерацию и другие языки. процесс, аналогичный показанному на следующем рисунке:

В общем, компиляция статических языков, таких как Java, заключается в компиляции исходного кода в байт-код, Эти два языка обычно находятся на разных уровнях абстракции, в то время как два конца Transpile представляют собой по существу один и тот же уровень абстракции, который Как правило, переходите от реализации, поддерживающей более продвинутые функции, например ES2017, к реализации с меньшим количеством языковых функций, например ES5. При решении проблемы совместимости браузеров в значительной степени необходимо полагаться на перевод Babel, чтобы решить ситуацию, когда браузеры более ранних версий не поддерживают некоторые новые функции.

Как CLI3 использует browserslist и babel для перевода

babel — это инструмент для компиляции JS-файлов. Используется для компиляции новых функций JS в поддерживаемые целевые браузеры. babel/preset-env загружает целевой браузер из файла browserlistrc:


"babel": {
    "presets": [
        [
            "@babel/preset-env"
        ]
    ]
}

Затем babel скомпилирует функции синтаксиса JS в новом стандарте в код, поддерживаемый текущим целевым браузером:


const array = [1, 2, 3];
const [first, second] = array;

выход:


const array = [1, 2, 3];
const first = array[0],
      second = array[1];

Константную функцию здесь не нужно понижать, потому что целевой браузер поддерживает ее.

** Перевод Бабеля можно кратко охарактеризовать следующими тремя этапами: **

  1. parser: перевод JS-кода в AST на основе формата babel-AST через babel-parser.
  2. Преобразование: все плагины/пресеты дополнительно выполняют пользовательский перевод, такой как синтаксис, по-прежнему AST
  3. генератор: Наконец, переведенная строка генерируется генератором.

Различные функции в сочетании с Browserslist и @Babel/preset-env будут переведены в соответствии с функциями, поддерживаемыми текущим целевым браузером, а неподдерживаемые функции будут понижены. Babel сам по себе является сложной темой, и в будущем есть куда копать дальше, исходя из принципа компиляции.

Polyfills

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

if(browserSupportAllFeatures()) {
    main();
} else {
    loadScript('polyfills.js', main);
}

принципПо умолчанию он передает useBuiltIns: 'usage' в babel/preset-env, чтобы он автоматически определял требуемый полифилл на основе особенностей языка, присутствующих в исходном коде. Убедитесь, что количество полифилов в финальном пакете сведено к минимуму. Однако это также означает, что если для одной из зависимостей требуется специальный полифилл, babel не может его обнаружить по умолчанию.

// 源代码
var a = new Promise();

// 输出
import 'core-js/modules/es6.promise';
var a = new Promise();

Зависимости требуют PolyfillsЕсли есть зависимости, которые нужно заполнить полифилом, у вас есть несколько вариантов: (из babel-preset-app)

  1. Если зависимость основана на версии ES, не поддерживаемой целевой средой, добавьте ее в параметр traspileDependcies в vue.config.js. Это включает как преобразование синтаксиса, так и обнаружение полифилла на основе использования для этой зависимости. По умолчанию babel-loader игнорирует все файлы в node_modules. Если вы хотите явно передать зависимость через Babel, вы можете указать ее в этой опции:
trasnpileDependencies: [lodash，...]
  1. Если зависимость отправляет код ES5 и явно перечисляет необходимые полифиллы: вы можете использовать параметр полифиллов @vue/babel-preset-app, чтобы предварительно включить необходимые полифиллы. (Регистрация es6.promise будет включена по умолчанию, поскольку в наши дни библиотеки очень часто полагаются на промисы.)
// babel.config.js
module.exports = {
    presets: [
        ['@vue/app', {
          polyfills: [
              'es6.promise',
              'es6.symbol'
          ],
          useBuiltIns: 'entry'
        }]
    ]
}

рекомендоватьТаким образом полифиллы добавляются вместо того, чтобы импортировать их непосредственно в исходный код, потому что, если полифилл, указанный здесь, не нужен в целевом списке браузера, он будет автоматически исключен. 3. Если зависимость поставляет код ES5, но использует функции ES6+ и не содержит явного списка требуемого полифилла, используйте useBuiltIns: 'entry' и добавьте import '@babel/polyfill' в файл записи. Это позволит импортировать все полифиллы в соответствии с целью списка браузеров, поэтому вам не нужно беспокоиться о зависимых полифиллах, Недостаток: но включает некоторые полифилы, которые не используются, поэтому окончательный пакет может увеличиться. (Это тоже не работает, так как в зависимостях явно не указаны необходимые полифиллы)

// 源代码
import '@babel/polyfill'

// 输出
import 'core-js/modules/es7.string.pad-start';
import 'core-js/modules/es7.string.pad-end';

Современный режим (современный режим)

Что такое современный режим?Современный режим предлагается Vue CLI 3. Чтобы решить проблему поддержки старых браузеров и доставки громоздкого кода для них, после использования официальных скаффолдингов для сборки проекта его можно запустить следующим образом:

vue-cli-service build --modern

Встроенная служба службы CLI3 вызовет webpack для сборки и компиляции для создания двух типов пакетов, один из которых представляет собой современную версию пакета, которая не содержит дополнительных полифилов. Один из них — устаревший пакет для неподдерживаемых устаревших браузеров, в котором представлены дополнительные полифиллы на основе конфигураций browserslist и babel-preset-env.

  • Современные сумки пройдут<script type="module">загружаются в поддерживаемые браузеры; они также используют<link rel ="modulepreload">предварительная загрузка.
  • Устаревший пакет пройден<script nomodule>загружается, игнорируется браузерами, поддерживающими ESM.

сравнение выходовНе используя современный режим:

Современный режим Vue CLI 3:

Используя современный метод, в каталоге будут сгенерированы два пакета:

объяснять

<script src="/xx/sxx.js" nomodule></script>

Если функция nomodule объявлена ​​в теге скрипта, она сообщит браузерам, поддерживающим модуль ES2015, не выполнять скрипт. Этот тег обычно используется в старых браузерах для ссылки на скрипты с устаревшими флагами.

<script type="module" src="/xxx/sss/a.js"></script>

Когда значение свойства Type объявлено в теге Script, браузер будет рассматривать код внутри как целый JS-модуль.Обработка содержимого скрипта не зависит от атрибутов CHARSET и DEFER, и поведение кода может относиться к не указанному Различному во время модуля. (Ранее значение Type обычно было значением JS MIME в браузере HTML5, что указывало на сценарий как JS. Но теперь спецификация H5 требует, чтобы разработчики опускали этот атрибут, не предоставляя избыточные типы MIME.)

резюме

Vue CLI 3 предоставляет полный набор решений, которые предоставляют официальные инструменты сообщества и Vue, включая Browserslist, Babel, @Babel/preset-env и современный режим, чтобы совместно справиться с большой дырой в совместимости браузеров. Проекты, созданные с помощью CLI3, будут использовать Browserslist для запроса браузеров (включая типы и версии), а затем настраивать Babel с предустановками для перевода исходного кода для целевой среды или вводить полифиллы для решения проблем совместимости. Более того, современный режим также будет использовать эти настройки и целевую среду для сборки двух пакетов, подходящих для работы в браузерах, поддерживающих все новые функции проекта, и браузерах, которые их не поддерживают. Наконец, предупреждаю, в следующей статье будут объединены Modernizr и CLI3 для практики -- "Практика совместимости браузеров - Modernizr"

Reference

Stat Counter

Поддержка браузерами функций H5 и CSS3.

Таблица конфигурации целевого браузера

browserlist

Vue CLI3

Babel

Babel AST format

Категории