Vue+webpack+Element 兼容問題總結 - JavaShuo

項目中用到了Vue.js和Elenment-UI
Vue官方文檔中給出明確範圍：Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的瀏覽器。
並且Element-UI支持IE10+及大多數瀏覽器。由此要用到Babel，主要用於將ECMAScript 2015+代碼轉換爲舊瀏覽器或環境中向後兼容的JavaScript版本。在此以前，須要先搞清楚IE6~11是否支持es5：javascript

IE6~IE8:不支持es5的全部語法;
IE9:支持除ECMAScript 5 Strict Mode外的es5語法；
IE10:支持es5的全部語法;
IEÏ11:支持es5全部語法及es6中const和Typed Arrays新語法

babel能夠把同種語言的高版本規則翻譯成低版本規則，其轉譯過程也分爲三個階段：parsing、transforming、generating。(1)解析步驟接收代碼並輸出 AST(抽象語法樹),這其中又包含兩個階段詞法分析和語法分析。詞法分析階段把字符串形式的代碼轉換爲令牌（tokens）流。語法分析階段會把一個令牌流轉換成 AST 的形式,方便後續操做。(2) 利用咱們配置好的plugins/presets把Parser生成的AST轉變爲新的AST。(3)代碼生成步驟過程是深度優先遍歷整個 AST，而後構建能夠表示轉換後代碼的字符串。java

下面總結Babel的使用：
一、因爲項目使用了webpack打包工具，安裝node

npm install --save-dev babel-loader babel-core

二、在webpack.config.js中設置webpack

module: {
   rules: [
     {
       test: /\.js$/,
       loader: "babel-loader",
       include: [
         resolve("src"),
         resolve("test"),
       ],
     },Ï
   ]
}

能夠根據webpack中Module的選項來配置相應內容
三、在根目錄下建立.babelrc文件來添加插件,文件添加成功後，能夠開始配置內容
首先，可使用evn預設置，它支持ES2015+的轉換git

npm install babel-preset-env --save-dev

在.babelrc文件中es6

{
"presets":["evn"]

}

若是沒有任何配置選項，babel-preset-env的行爲與babel-preset-latest(或babel-preset-es201五、babel-preset-es2016和babel-preset-es2017一塊兒)徹底相同。
固然，還有可選的選項能夠配置，例如：github

[
      "env",
      {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions"]
        }
      }
      "stage-2"
    ],

evn中設置項所表明的意思：web

targets.node 支持到哪一個版本的
node targets.browsers 支持到哪一個版本的瀏覽器
loose 啓動寬鬆模式，配合 webpack 的 loader 使用
modules 使用何種模塊加載機制
debug 開啓調試模式
include 包含哪些文件
exclude 排除哪些文件
useBuiltIns 是否對 babel-polyfill 進行分解，只引入所需的部分

targets.browsers是參考browserslist https://github.com/browsersli... 設置瀏覽器條件。
設置了完成後，還須要用babel-polyfill來實現瀏覽器不能支持的原生代碼，在瀏覽器引入了相應的polyfill後，能夠用新的內置對象好比 Promise 或者 WeakMap, 靜態方法好比 Array.from 或者 Object.assign, 實例方法好比 Array.prototype.includes。可是由於babel-polyfill是在原型鏈上直接添加方法，會污染全局變量，項目打包之後體積增大。npm

npm install --save babel-polyfill

若在應用程序的入口頂點引入，則瀏覽器

require("babel-polyfill")

；
若是在應用程序的入口點使用ES6的導入語法，則應該在入口點的頂部導入polyfill，以確保首先加載polyfills

import("babel-polyfill")

;
若是經過webpack.config.js,在入口處添加：

module.exports = { entry: ["babel-polyfill", "./app/js"] };

爲了避免污染全局對象和內置的對象原型，能夠用babel-plugin-transform-runtime，在.babelrc文件中

"plugins": [
    [
      "transform-runtime",
      {
        "helpers": false,
        "polyfill": true,
        "moduleName": "babel-runtime"
      }
    ],
  ]

插件應用於babel的轉譯過程，尤爲是第二個階段transforming，若是這個階段不使用任何插件，那麼babel會原樣輸出代碼。若是同時添加了plugins和presets,注意：插件會在預設項以前運行；插件按第一個到最後一個正序執行；預設中設置從最後一個到第一個逆序執行，設置時注意執行順序。