vue-cli的瀏覽器兼容babel的配置

vue-cli的瀏覽器兼容的配置

一：通過browserslist來指定項目的目標瀏覽器范圍，編譯時會根據配置的目標瀏覽器來有針對性的轉義；

• 參考地址：github關於browserslist開源項目使用介紹

• 參考地址：vue-cli官網介紹

  //例如在package.json中的配置
  //這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。
  {
    "private": true,
    "dependencies": {
      "autoprefixer": "^6.5.4"
   },
    "browserslist": [ //配置要兼容的瀏覽器，符合下面搜索條件的所有瀏覽器都可以自動兼容進行前綴等注入兼容。
      "last 1 version", //所有瀏覽器兼容到最后1個版本根據CanIUse.com追蹤的版本
      "> 1%", //全球超過1%人使用的瀏覽器
      "IE 10" //要兼容ie10
   ]
  }

• 各種 browserslist 的配置的意思：

• 例子	說明
  > 1%	全球超過1%人使用的瀏覽器
  > 5% in US	指定國家使用率覆蓋
  last 2 versions	所有瀏覽器兼容到最后兩個版本根據CanIUse.com追蹤的版本
  Firefox ESR	火狐最新版本
  Firefox > 20	指定瀏覽器的版本范圍
  not ie <=8	方向排除部分版本
  Firefox 12.1	指定瀏覽器的兼容到指定版本
  unreleased versions	所有瀏覽器的beta測試版本
  unreleased Chrome versions	指定瀏覽器的測試版本
  since 2013	2013年之后發布的所有版本

  二：通過babel.config.js（新版本的cli支持這個方式）來結合上面進行babel轉義的配置；

  • 參考地址 cli-babel-preset-app

    //根目錄下的babel.config.js配置
    //安裝dev "@vue/cli-plugin-babel": "^4.0.4"
    //安裝save "core-js": "^3.1.2"
    module.exports = {
      presets: [
        '@vue/cli-plugin-babel/preset',
       [
          '@babel/preset-env',
         {
            'useBuiltIns': 'entry',
            'corejs': 3
         }
       ]
     ],
      plugins:[]
    }
    ​

    2.1 關於 useBuiltIns 的配置，三個可選項 [false,'entry','usage']

    2.1.1."useBuiltIns": false

    (此時不對 polyfill 做操作。如果引入 @babel/polyfill，則無視配置的瀏覽器兼容，引入所有的 polyfill。)

    2.1.2."useBuiltIns": "entry","corejs": 2,

    (根據配置的瀏覽器兼容，引入瀏覽器不兼容的 polyfill。需要在入口文件手動添加 import '@babel/polyfill'，會自動根據 browserslist 替換成瀏覽器不兼容的所有 polyfill。

    這里需要指定 core-js 的版本, 如果 "corejs": 3, 則 import '@babel/polyfill' 需要改成下面這樣:)

    // 在main.js的頭部
    import 'core-js/stable';
    import 'regenerator-runtime/runtime';

    2.1.3."useBuiltIns": "usage","corejs": 2,

    (usage 會根據配置的瀏覽器兼容，以及你代碼中用到的 API 來進行 polyfill，實現了按需添加。)

  •