@Babel/ployfill：解决移动端低版本不兼容问题

（一）需求背景：

做项目的时候，移动端测试低版本安卓页面白屏，通过排查，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种方式：