Vue+webpack+Element 兼容問題總結

fxp 發布于2019-08-26 12:10 / 2728人閱讀

摘要：項目中用到了和官方文檔中給出明確范圍不支持及以下版本，因為使用了無法模擬的特性。但它支持所有兼容的瀏覽器。詞法分析階段把字符串形式的代碼轉換為令牌流。語法分析階段會把一個令牌流轉換成的形式方便后續操作。利用我們配置好的把生成的轉變為新的。

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

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，然后構建可以表示轉換后代碼的字符串。

下面總結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"),
       ],
     },?
   ]
}

可以根據webpack中Module的選項來配置相應內容
3、在根目錄下創建.babelrc文件來添加插件,文件添加成功后，可以開始配置內容
首先，可以使用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 開啟調試模式

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 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,注意：插件會在預設項之前運行；插件按第一個到最后一個正序執行；預設中設置從最后一個到第一個逆序執行，設置時注意執行順序。

云服務器 GPU云服務器 MySQL授權問題總結兼容問題兼容性問題 Js的兼容問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108144.html

Vue+webpack+Element 兼容問題總結

摘要：項目中用到了和官方文檔中給出明確范圍不支持及以下版本，因為使用了無法模擬的特性。但它支持所有兼容的瀏覽器。詞法分析階段把字符串形式的代碼轉換為令牌流。語法分析階段會把一個令牌流轉換成的形式方便后續操作。利用我們配置好的把生成的轉變為新的。項目中用到了Vue.js和Elenment-UIVue官方文檔中給出明確范圍：Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法...

sumory 2019-08-02 11:14 評論0 收藏0
ElementUI的構建流程

摘要：下面一步步拆解上述流程。切換至分支檢測本地和暫存區是否還有未提交的文件檢測本地分支是否有誤檢測本地分支是否落后遠程分支發布發布檢測到在分支上沒有沖突后，立即執行。背景最近一直在著手做一個與業務強相關的組件庫，一直在思考要從哪里下手，怎么來設計這個組件庫，因為業務上一直在使用ElementUI（以下簡稱Element），于是想參考了一下Element組件庫的設計，看看Element構...

wudengzan 2019-08-23 12:01 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0
Vue-cli3 簡qian易yi教程

摘要：原文地址對于沒有了解過的童鞋，建議先去看看官方的教程傳送門新版本的新特性插件使用的插件，可以很快的搭建一個項目的結構。使用時直接引入即可。的界面讓管理項目變得更加簡單。如遷移過程中有任何疑問，可以留言一起探討。原文地址對于沒有了解過 vue-cli3 的童鞋，建議先去看看官方的教程：傳送門新版本的新特性 1. 插件使用 cli 的插件，可以很快的搭建一個項目的結構。如 ax...

jemygraw 2019-08-23 12:09 評論0 收藏0
手摸手，帶你用vue擼后臺系列五(v4.0新版本)

摘要：同時增加了單元測試，使用了，增加了可視化配置權限，增加了自定義布局等等，優化了原先的權限方案，支持不刷新頁面更新路由等等功能。雖然它的初衷是為了單元測試的，但正好滿足了我們的需求。它會重寫瀏覽器的對象，從而才能攔截所有請求，代理到本地。前言 vue-element-admin 從 2017.04.17提交第一個 commit 以來，維護至今已經有兩年多的時間了了，發布了四十多個版本，...

MonoLog 2019-08-26 13:43 評論0 收藏0