Расскажите о тех вещах, которые автоматически добавляют префиксы в проекте vue.

внешний интерфейс браузер Vue.js Firefox

В настоящее время проект, инициализированный vue-cli, автоматически настроил для нас postcss, и одним из наших очень часто используемых плагинов является autoprefixer, который автоматически дополняет префикс свойства браузера:

Например, мне нужно написать совместимые атрибуты:

.head {
    display: flex;
}

Скомпилированный автоматически завершает его для насdisplay:flex;Связанные префиксы браузера, как показано на рисунке:


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

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


Вы можете увидеть список браузеров здесь, и вы можете настроить наши требования совместимости.Представлен cli официального сайта vue (Портал с описанием, но это английское описание, пожалуйста, переведите его для тех, кто плохо владеет английским языком), исходный текст выглядит следующим образом:

However there is a caveat. browserslist recommends defining the target in a common place like package.json or in a .browserslistrc config file. This allows tools like autoprefixer and eslint-plugin-compat to share the config. For this template, browserslist is configured in the package.json

В грубом переводе это:

       Это имеет оговорку:browserslistпредложить, чтобы мыpackage.jsonфайл или.browserslistrcцель определяется в файле конфигурации. Это позволяетautoprefixerа такжеeslint-plugin-compatподелиться этой конфигурацией. Для этого шаблонаbrowserslistсуществуетpackage.jsonнастраивается так:

{
  "...": "...",
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Есть еще одна идея, исходный текст такой:

But the latest stable release of babel-preset-env, v1.6.1 does not support loading the config from package.json. So the target environment is repeated in .babelrc. If you wish to change your target environment, please be sure to update both package.json and .babelrc. Note that this has been fixed in the beta version(@babel/preset-env@7.0.0-beta.34) and the template will be updated once it is out of beta.

Переведите грубо:

    ноbabel-preset-envплагинv1.6.1Последняя стабильная версия не поддерживаетpackage.jsonзагрузить конфигурацию в , поэтому целевая среда находится в.babelrcповторяется в файле. Если вы хотите изменить целевую среду, обязательно обновите ее.package.jsonа также.babelrc. Примечание: они были исправлены во внешней бета-версии (@babel/preset-env@7.0.0-beta.34), как только он выпустит внешнюю бета-версию, шаблоны vue также будут обновлены.

Перечислено здесь,browserslistДругие общие параметры:

  • > 5%: глобальная доля версий браузера (здесь имеются в виду совместимые версии браузеров с глобальной долей более 5%).>=, < а также <=
  • > 5% in US: Поделиться в США. больше кликовздесь
  • > 5% in alt-AS: Доля в Азии. больше кликовздесь
  • > 5% in my stats: uses custom usage data.
  • cover 99.5%: most popular browsers that provide coverage.
  • cover 99.5% in US: same as above, with two-letter country code.
  • cover 99.5% in my stats: uses custom usage data.
  • extends browserslist-config-mycompany: take queries from browserslist-config-mycompany npm package.
  • ie 6-8: выберите версию браузера для совместимости, например, совместимую с ie6-8.
  • Firefox > 20: обновление версии Firefox выше 20,>=, < а также <=может быть использован.
  • iOS 7: Напрямую совместим с браузерами iOS 7.
  • Firefox ESR: Последняя версия [Firefox ESR].
  • unreleased versions or unreleased Chrome versions: Совместимость с внутренней бета-версией или внешней бета-версией
  • last 2 major versions or last 2 iOS major versions: all minor/patch releases of last 2 major versions.
  • since 2015 or last 2 years: Совместимость с версиями до 2015 года (илиsince 2015-03а также since 2015-03-10).
  • dead: last 2 versionПоследняя версия совместима с браузером номера, но менее 0,5% его глобального покрытия и официальной поддержки больше не поддерживается или обновляется более двух лет, они собираются совместимы. Если вы не хотите использовать совместимыеnot deadТекущая версия браузера:IE 10, IE_Mob 10, BlackBerry 10, BlackBerry 7,  OperaMobile 12.1.
  • last 2 versions: Совместимость с двумя последними версиями каждого браузера.
  • last 2 Chrome versions: Совместимость с двумя последними версиями Chrome.
  • defaults: совместимость со списком браузеров по умолчанию (> 0.5%, last 2 versions, Firefox ESR, not dead), то есть он должен быть совместим с глобальным охватом более 0,5%, двумя последними версиями каждого браузера, последней версией esr Firefox и браузерами, которые еще не умерли. Определение мертвых здесь см. выше.deadОпределение
  • not ie <= 8: Выйдите за пределы этих совместимых версий браузера Другие версии

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

Дополнительная информация и интересное использование postcss будут добавлены позже в другие шаблоны vue webpack.

Собери, если тебе это нравится!


Категории