Vue+webpack+Element 兼容问题总结(小结)


Posted in Javascript onAugust 16, 2018

项目中用到了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/browserslist/browserslist设置浏览器条件。

设置了完成后,还需要用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,注意:插件会在预设项之前运行;插件按第一个到最后一个正序执行;预设中设置从最后一个到第一个逆序执行,设置时注意执行顺序。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
JavaScript 面向对象之命名空间
May 04 Javascript
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
基于vue.js实现的分页
Mar 13 Javascript
js常用正则表达式集锦
May 17 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 #Javascript
深入理解Vue 组件之间传值
Aug 16 #Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 #Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 #Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 #Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 #Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 #Javascript
You might like
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JavaScript函数作用域链分析
2015/02/13 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
理解javascript正则表达式
2016/03/08 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
使用DeviceOne实现微信小程序功能
2016/12/29 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
介绍Python的@property装饰器的用法
2015/04/28 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
python实现图像全景拼接
2020/03/27 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
学习Python爬虫的几点建议
2020/08/05 Python
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
大学生应聘求职信
2014/05/26 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
大学生简短的自我评价
2014/09/12 职场文书
小学班主任教育随笔
2015/08/15 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android