說說vue專案中自動新增字首的那些事

愣錘發表於2018-06-19
Vue

目前,vue-cli初始化的專案中已經自動幫我們配置好postcss了,而其中我們非常常用的一個外掛就是autoprefixer,瀏覽器屬性字首自動補全:

例如我寫一個需要相容屬性:

.head {
    display: flex;
}
複製程式碼

編譯後的自動幫我們補全了display:flex;相關的瀏覽器字首,如圖:

說說vue專案中自動新增字首的那些事

如此一來,我們便不再需要手動寫私有字首,這樣極易出錯,寫起來也很累.即使我們通過less/sass等定義一些minxin.less來出來相容的問題,還是沒有這種方式暴力.

那麼假如我想改變一些相容的需求呢,例如我對某個瀏覽器的某個版本需要相容或者其他相容需求,我們可以自行配置。下面開啟我們的package.json檔案,拉倒最底下:

說說vue專案中自動新增字首的那些事

可以看到這裡的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的更多資訊及有趣的用法。

喜歡就收藏一下吧！


相關文章