Vue+webpack+Element 兼容问题总结

2023年5月15日 270次阅读 来源: Cuiyuwei

项目顶用到了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,注重：插件会在预设项之前运转；插件按第一个到末了一个正序实行；预设中设置从末了一个到第一个逆序实行，设置时注重实行递次。

    原文作者：Cuiyuwei
    原文地址: https://segmentfault.com/a/1190000016006376
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞