Vue+webpack+Element 兼容問(wèn)題總結(jié)

sumory 發(fā)布于2019-08-02 11:14 / 2964人閱讀

摘要：項(xiàng)目中用到了和官方文檔中給出明確范圍不支持及以下版本，因?yàn)槭褂昧藷o(wú)法模擬的特性。但它支持所有兼容的瀏覽器。詞法分析階段把字符串形式的代碼轉(zhuǎn)換為令牌流。語(yǔ)法分析階段會(huì)把一個(gè)令牌流轉(zhuǎn)換成的形式方便后續(xù)操作。利用我們配置好的把生成的轉(zhuǎn)變?yōu)樾碌摹?/p>

項(xiàng)目中用到了Vue.js和Elenment-UI
Vue官方文檔中給出明確范圍：Vue 不支持 IE8 及以下版本，因?yàn)?Vue 使用了 IE8 無(wú)法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。
而且Element-UI支持IE10+及大多數(shù)瀏覽器。由此要用到Babel，主要用于將ECMAScript 2015+代碼轉(zhuǎn)換為舊瀏覽器或環(huán)境中向后兼容的JavaScript版本。在此之前，需要先搞清楚IE6~11是否支持es5：

IE6~IE8:不支持es5的所有語(yǔ)法;

IE9:支持除ECMAScript 5 Strict Mode外的es5語(yǔ)法；

IE10:支持es5的所有語(yǔ)法;

IE?11:支持es5所有語(yǔ)法及es6中const和Typed Arrays新語(yǔ)法

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

下面總結(jié)Babel的使用：
1、由于項(xiàng)目使用了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的選項(xiàng)來(lái)配置相應(yīng)內(nèi)容
3、在根目錄下創(chuàng)建.babelrc文件來(lái)添加插件,文件添加成功后，可以開(kāi)始配置內(nèi)容
首先，可以使用evn預(yù)設(shè)置，它支持ES2015+的轉(zhuǎn)換

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

在.babelrc文件中

{
"presets":["evn"]

}

如果沒(méi)有任何配置選項(xiàng)，babel-preset-env的行為與babel-preset-latest(或babel-preset-es2015、babel-preset-es2016和babel-preset-es2017一起)完全相同。
當(dāng)然，還有可選的選項(xiàng)可以配置，例如：

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

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

targets.node 支持到哪個(gè)版本的

node targets.browsers 支持到哪個(gè)版本的瀏覽器

loose 啟動(dòng)寬松模式，配合 webpack 的 loader 使用

modules 使用何種模塊加載機(jī)制

debug 開(kāi)啟調(diào)試模式

include 包含哪些文件

exclude 排除哪些文件

useBuiltIns 是否對(duì) babel-polyfill 進(jìn)行分解，只引入所需的部分

targets.browsers是參考browserslist https://github.com/browsersli... 設(shè)置瀏覽器條件。
設(shè)置了完成后，還需要用babel-polyfill來(lái)實(shí)現(xiàn)瀏覽器不能支持的原生代碼，在瀏覽器引入了相應(yīng)的polyfill后，可以用新的內(nèi)置對(duì)象比如 Promise 或者 WeakMap, 靜態(tài)方法比如 Array.from 或者 Object.assign, 實(shí)例方法比如 Array.prototype.includes。但是因?yàn)閎abel-polyfill是在原型鏈上直接添加方法，會(huì)污染全局變量，項(xiàng)目打包以后體積增大。

npm install --save babel-polyfill

若在應(yīng)用程序的入口頂點(diǎn)引入，則

require("babel-polyfill")

；
如果在應(yīng)用程序的入口點(diǎn)使用ES6的導(dǎo)入語(yǔ)法，則應(yīng)該在入口點(diǎn)的頂部導(dǎo)入polyfill，以確保首先加載polyfills

import("babel-polyfill")

;
如果通過(guò)webpack.config.js,在入口處添加：

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

為了不污染全局對(duì)象和內(nèi)置的對(duì)象原型，可以用babel-plugin-transform-runtime，在.babelrc文件中

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

插件應(yīng)用于babel的轉(zhuǎn)譯過(guò)程，尤其是第二個(gè)階段transforming，如果這個(gè)階段不使用任何插件，那么babel會(huì)原樣輸出代碼。
如果同時(shí)添加了plugins和presets,注意：插件會(huì)在預(yù)設(shè)項(xiàng)之前運(yùn)行；插件按第一個(gè)到最后一個(gè)正序執(zhí)行；預(yù)設(shè)中設(shè)置從最后一個(gè)到第一個(gè)逆序執(zhí)行，設(shè)置時(shí)注意執(zhí)行順序。