小編給大家分享一下如何解決Vue+webpack+Element的兼容問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司主營沂水網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,重慶APP開發(fā),沂水h5成都微信小程序搭建,沂水網(wǎng)站營銷推廣歡迎沂水等地區(qū)企業(yè)咨詢

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

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

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

• IE6~IE8:不支持es5的所有語法;

• IE9:支持除ECMAScript 5 Strict Mode外的es5語法；

• IE10:支持es5的所有語法;

• IEÏ11:支持es5所有語法及es6中const和Typed Arrays新語法

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

下面總結Babel的使用：

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

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

2、在webpack.config.js中設置

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

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

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

首先，可以使用evn預設置，它支持ES2015+的轉換

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一起)完全相同。

當然，還有可選的選項可以配置，例如：

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

evn中設置項所代表的意思：

• targets.node 支持到哪個版本的

• node targets.browsers 支持到哪個版本的瀏覽器

• loose 啟動寬松模式，配合 webpack 的 loader 使用

• modules 使用何種模塊加載機制

• debug 開啟調(diào)試模式

• include 包含哪些文件

• exclude 排除哪些文件

• useBuiltIns 是否對 babel-polyfill 進行分解，只引入所需的部分

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

設置了完成后，還需要用babel-polyfill來實現(xiàn)瀏覽器不能支持的原生代碼，在瀏覽器引入了相應的polyfill后，可以用新的內(nèi)置對象比如 Promise 或者 WeakMap, 靜態(tài)方法比如 Array.from 或者 Object.assign, 實例方法比如 Array.prototype.includes。但是因為babel-polyfill是在原型鏈上直接添加方法，會污染全局變量，項目打包以后體積增大。

npm install --save babel-polyfill

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

require("babel-polyfill")；

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

import("babel-polyfill");

如果通過webpack.config.js,在入口處添加：

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

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

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

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

以上是“如何解決Vue+webpack+Element的兼容問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：如何解決Vue+webpack+Element的兼容問題
分享鏈接：http://www.rwnh.cn/article44/gopiee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站改版、用戶體驗、微信小程序、微信公眾號、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)