Vue+webpack+Element 兼容问题总结(小结)
项目中用到了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,注意:插件会在预设项之前运行;插件按第一个到最后一个正序执行;预设中设置从最后一个到第一个逆序执行,设置时注意执行顺序。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 推荐算法——基于图的推荐算法PersonalRank算法
- 推荐算法——非负矩阵分解(NMF)
- 【Go 语言社区】转-golang windows 判断锁屏
- 【Go 语言社区】单点redis 持久化在高并发下存在延迟情况
- 设计模式(2)-策略模式之多用组合少用继承
- Golang获取随机端口和本机ip地址
- 设计模式(3)-装扮你的类(装饰模式)
- [Go 语言社区]服务器读取配置文件只-json数据
- gsoap开发webservice
- [Go 语言社区]测试模块之---utf8例子
- org.hibernate.type.StringType cannot be cast to org.hibernate.type.VersionType
- JBPM4.4(2)-state结点和decision结点
- [Go 语言社区] Golang架构底层---日志函数
- [Go 语言社区]服务器游戏用户登陆数据读取函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker学习笔记---Dockerfile
- Java面试高频知识点汇总 JVM专题
- Java面试高频知识点汇总 网络协议专题
- 「Mysql优化大师一」mysql服务性能剖析工具
- FPGA设计心得(12)如何正确使用 in_system_ibert ?
- Java面试高频知识点汇总 垃圾回收(GC)机制专题
- Celery-分布式任务队列学习笔记
- Java面试高频知识点汇总 数据库专题
- Java面试高频知识点总结 Redis
- Java面试高频知识点总结 Spring
- 杂谈小程序
- pytest封神之路第四步 内置和自定义marker
- (译)SDL编程入门(3)事件驱动编程
- 一个简单的Angular search UI实现
- (译)SDL编程入门(2)在屏幕上显示图像