項目中用到了Vue.js和Elenment-UI

Vue官方文檔中給出明確范圍：Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。

而且Element-UI支持IE10+及大多數(shù)瀏覽器。由此要用到Babel，主要用于將ECMAScript 2015+代碼轉(zhuǎn)換為舊瀏覽器或環(huán)境中向后兼容的JavaScript版本。在此之前，需要先搞清楚IE6~11是否支持es5：

babel可以把同種語言的高版本規(guī)則翻譯成低版本規(guī)則，其轉(zhuǎn)譯過程也分為三個階段：parsing、transforming、generating。(1)解析步驟接收代碼并輸出 AST(抽象語法樹),這其中又包含兩個階段詞法分析和語法分析。詞法分析階段把字符串形式的代碼轉(zhuǎn)換為令牌（tokens）流。語法分析階段會把一個令牌流轉(zhuǎn)換成 AST 的形式,方便后續(xù)操作。(2) 利用我們配置好的plugins/presets把Parser生成的AST轉(zhuǎn)變?yōu)樾碌腁ST。(3)代碼生成步驟過程是深度優(yōu)先遍歷整個 AST，然后構(gòu)建可以表示轉(zhuǎn)換后代碼的字符串。

下面總結(jié)Babel的使用：

1、由于項目使用了webpack打包工具，安裝

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

2、在webpack.config.js中設(shè)置

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

可以根據(jù)webpack中Module的選項來配置相應(yīng)內(nèi)容

3、在根目錄下創(chuàng)建.babelrc文件來添加插件,文件添加成功后，可以開始配置內(nèi)容

首先，可以使用evn預(yù)設(shè)置，它支持ES2015+的轉(zhuǎn)換

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

在.babelrc文件中

{"presets":["evn"]}

如果沒有任何配置選項，babel-preset-env的行為與babel-preset-latest(或babel-preset-es2015、babel-preset-es2016和babel-preset-es2017一起)完全相同。

當(dāng)然，還有可選的選項可以配置，例如：

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

evn中設(shè)置項所代表的意思：

targets.browsers是參考browserslist https://github.com/browserslist/browserslist設(shè)置瀏覽器條件。