(一)需求背景:
做项目的时候,移动端测试低版本安卓页面白屏,通过排查,es6代码不兼容导致浏览器不识别const关键字报错,使用@babel/ployfill 来解决低版本不兼容问题
(二)bebel 相关
1. babel 的作用是将 es6 的代码转换为 es5,以便能够运行在当前和旧版本的浏览器或其他环境中。它本质是javascript的编译器
2. babel可以通过 Polyfill 方式在目标环境中添加缺失的特性,也就是说在项目中注入es6的代码运行环境。
3. ployfill:
ployfill 在英文里的意思是填充材料,而在这里的含义就是 垫片,帮你加一层东西来解决问题,不光是兼容性问题。
他会把差异性抹平,让不支持的变成支持的,原理:判断当前浏览器有没有这个功能,没有的话,就填充一些支持的补丁代码。
它主要用来解决一些API的兼容性问题
(三)在vue中引入@babel/ployfill
1. 安装
--save: 线上也要使用
--save-dev / -D : 仅仅开发环境使用
npm install @babel/ployfill --save
2. 引入
在main.js 入口文件中引入,最好放在第一行,这样一进来就编译到,确保最先加载
import '@babel/polyfill'
官方提供了3种方式: