别用babel-polyfill了,教你用core-js@3兼容
2020-09-02 本文已影响0人
乌罗
最近新启动了个pc端的项目,项目要求兼容IE,想必各位前端都清楚,要想拿下IE这个破地,必须用上babel。
个人平时对这方面也没有过分的关注,于是乎各种网上寻找解决方案,这一找,发现有时候网络就跟个历史博物馆一样,大部分问题的解决方案基本都是过时了的。通篇看下来,基本全是推荐使用babel-polyfill
的,于是我上npm看了下,发现这个插件最后一次提交是3年前。
是的,
vue3
都RC
版本了,新的es语法规范也在不断的被纳入。凭直觉,我感觉这插件应该不是最好的解决方案。于是又上
vue-cli
的官方文档网站寻找关于浏览器兼容性配置的说明,一番浏览,发现还是官方文档比较靠谱一些,虽然因自身水平问题还去寻找了其他文章来配合使用,但不管怎么样,磕磕绊绊的总算是让它可以兼容IE9及以上的版本了。这个项目使用的是用
vue/cli@4x
搭建的,vue
全家桶少不了,另外还使用了element-ui
和scss
。为了兼容
IE
,需要在babel.config.js
文件中加入如下配置:
module.exports = {
presets: [
['@babel/preset-env', {
modules: false,
useBuiltIns: 'entry',
corejs: 3
}]
],
...
然后在入口文件中加入以下内容:
import 'core-js/stable'
import 'regenerator-runtime/runtime'
再运行后,你会发现IE浏览器再也不会只能出来个标题,页面一片空白了。
怎么样?是不是很简单!