說說vue項目中自動添加前綴的那些事

目前,vue-cli初始化的項目中已經自動幫咱們配置好postcss了,而其中咱們很是經常使用的一個插件就是autoprefixer,瀏覽器屬性前綴自動補全:

例如我寫一個須要兼容屬性:

.head {
    display: flex;
}
複製代碼

編譯後的自動幫咱們補全了display:flex;相關的瀏覽器前綴,如圖:

如此一來,咱們便再也不須要手動寫私有前綴,這樣極易出錯,寫起來也很累.即便咱們經過less/sass等定義一些minxin.less來出來兼容的問題,仍是沒有這種方式暴力.

那麼假如我想改變一些兼容的需求呢,例如我對某個瀏覽器的某個版本須要兼容或者其餘兼容需求,咱們能夠自行配置。下面打開咱們的package.json文件,拉倒最底下:

能夠看到這裏的browerslist,就能夠配置咱們的兼容需求vue官網的cli這塊有介紹到（附上說明的傳送門,不過是英文說明哦,英文很差的小夥伴記得翻譯一下），原文以下：

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: 火狐版本更新大於20的， >=, < 和 <= 均可以使用.
• iOS 7: 直接兼容ios 7的瀏覽器.
• Firefox ESR: 最新的[火狐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%且官方再也不支持維護或者更新超過2年，這些也是要去兼容的。若是不想去兼容可使用not dead如今的瀏覽器版本是: IE 10, IE_Mob 10, BlackBerry 10, BlackBerry 7,  OperaMobile 12.1.
• last 2 versions: 兼容每一個瀏覽器最新的兩個版本.
• last 2 Chrome versions: 兼容chrome最新的兩個版本
• defaults: Browserslist的默認兼容 (> 0.5%, last 2 versions, Firefox ESR, not dead)，即：須要兼容全球覆蓋率大於0.5%、每一個瀏覽器的最新兩個版本、火狐的最新esr版本、還沒死掉了的瀏覽器。這裏死掉的定義去看上面的dead的定義
• not ie <= 8: 去兼容這些瀏覽器版本以外的其餘版本

這裏送上browserslist的官方github文檔地址。更多信息請參考其文檔。

待後面補全更多vue的webpack模板中，postcss的更多信息及有趣的用法。

喜歡就收藏一下吧！