別用babel-polyfill了，教你用core-js@3兼容IE瀏覽器

最近新啟動了個pc端的項目，項目要求兼容IE，想必各位前端都清楚，要想拿下IE這個破地，必須用上babel。
個人平時對這方面也沒有過分的關注，於是乎各種網上尋找解決方案，這一找，發現有時候網絡就跟個歷史博物館一樣，大部分問題的解決方案基本都是過時了的。通篇看下來，基本全是推薦使用babel-polyfill的，於是我上npm看了下，發現這個插件最后一次提交是3年前。

 

babel-polyfill

是的， vue3都 RC版本了，新的es語法規范也在不斷的被納入。憑直覺，我感覺這插件應該不是最好的解決方案。
於是又上 vue-cli的官方文檔網站尋找關於瀏覽器兼容性配置的說明，一番瀏覽，發現還是官方文檔比較靠譜一些，雖然因自身水平問題還去尋找了其他文章來配合使用，但不管怎么樣，磕磕絆絆的總算是讓它可以兼容IE9及以上的版本了。
這個項目使用的是用 vue/cli@4x搭建的， vue全家桶少不了，另外還使用了 element-ui和 scss。

core-js

這個名詞肯定很多人沒聽過，今天也是在配置babelpolyfill方法發現的,babel7.4版本不支持babel-polyfill了

起因

在使用useBuiltIns:usage按需加載polyfill時，npm run build，就出現上述的提示

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "targets": {
        "chrome": "58",
        "ie": "11"
      }
    }]
  ]
}

 

大意是說我們使用了useBuiltIns選項但是沒有指定core-js警告，但是告訴你默認是使用core-js@2，但是這個默認行為以后可能會發生改變，最好顯示設置core.js，然后列出了@2和@3兩個版本

core-js介紹

其實core-js是我們能夠使用新的API的最重要的包，然而一般情況它隱藏在webpack編譯后的代碼中，我們一般不會去查看，所以容易被遺忘，我們在webpack生成環境下，查看編譯后的代碼，可以看到例如includes就是從core-js導出到我們的代碼去的

core-js是什么

• 它是JavaScript標准庫的polyfill
• 它盡可能的進行模塊化，讓你能選擇你需要的功能
• 它可以不污染全局空間
• 它和babel高度集成，可以對core-js的引入進行最大程度的優化

升級core-js@3動機

目前我們使用的都默認是core-js@2，它在一年半之前就封鎖了分支，至此之后的特性都只會添加到core-js@3，這里有一個生產例子，使用了core-js@2不支持的新特性，導致錯誤

core-js@2出現的問題

Vue-cli使用flat報錯

vue-cli也會在V4升級core-js

Roadmap for Vue-cli4

core-js@3添加的特性

具體core-js@3才有的特性看這里

core-js@3 特性概覽

• 支持ECMAScript穩定功能，引入core-js@3凍結期間的新功能，比如flat

• 加入到ES2016-ES2019中的提案，現在已經被標記為穩定功能

• 更新了提案的實現，增加了proposals配置項，由於提案階段不穩定，需要謹慎使用

• 增加了對一些web標准的支持，比如URL 和 URLSearchParams

• 現在支持原型方法，同時不污染原型

• 刪除了過時的特性

core-js@3與babel

以前我們實現API的時候，會引入整個polyfill,其實polyfill只是包括了以下兩個包

core-js regenerator-runtime 

core-js@3升級之后棄用了@babel/polyfill，以下是等價實現

// .babelrc

presets: [
  ["@babel/preset-env", {
    useBuiltIns: "entry", // or "usage"
    corejs: 3,
  }]
]

在入口文件引入這些模塊 

import "core-js/stable";
import "regenerator-runtime/runtime";

 

總結

core-js@3廢棄了babel-polyfill，實現了完全無污染的API轉譯，非常有潛力，但是其暫時會增加打包體積，這個還得看未來普及度上來之后的權衡

 原文鏈接；https://www.cnblogs.com/sefaultment/p/11631314.html