core-js@3帶來的驚喜

core-js

這個名詞肯定很多人沒聽過，今天也是在配置babelpolyfill方法發現的

起因

在使用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，以下是等價實現

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

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

總結

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