過去我們使用 babel 對 js 代碼進(jìn)行了兼容性處理，其中使用@babel/preset-env 智能預(yù)設(shè)來處理兼容性問題。
它能將ES6的一些語法進(jìn)行編譯轉(zhuǎn)換，比如箭頭函數(shù)、點(diǎn)點(diǎn)點(diǎn)運(yùn)算符等。但是如果是async函數(shù)、promise 對象、數(shù)組的一些方法(includes)等，它沒辦法處理。
所以此時(shí)我們js代碼仍然存在兼容性問題，一旦遇到低版本瀏覽器會(huì)直接報(bào)錯(cuò)。所以我們想要將 js 兼容性問題徹底解決
一、什么是core-js
core-js是一個(gè)JavaScript庫，提供了許多ES5、ES6和其他新特性的polyfills，以確保這些新特性在舊瀏覽器上的兼容性。
-
polyfill翻譯過來叫做墊片/補(bǔ)丁。就是用社區(qū)上提供的一段代碼，讓我們在不兼容某些新特性的瀏覽器上，使用該新特性。
它的主要用途是為了確保Web應(yīng)用程序在所有瀏覽器中都能運(yùn)行，并提高代碼的可移植性和可維護(hù)性。
舉個(gè)例子，ES6引入了一個(gè)新的數(shù)據(jù)結(jié)構(gòu)Map，但是在某些舊版本的瀏覽器中可能不支持Map。在這種情況下，使用core-js庫的Map polyfill可以確保Map在舊瀏覽器上正常工作。同樣，core-js還提供了Promise、Set、Symbol等其他轉(zhuǎn)換和擴(kuò)展功能
二、配置core-js
- 下載
npm i core-js文章來源：http://www.zghlxwxcb.cn/news/detail-494443.html
- 配置
bable.config.js，實(shí)現(xiàn)自動(dòng)按需加載
- babel.config.js
module.exports = {
// 智能預(yù)設(shè)：能夠編譯ES6語法
presets: [
[
"@babel/preset-env",
// 按需加載core-js的polyfill
{ useBuiltIns: "usage", corejs: { version: "3", proposals: true } },
],
],
};
- 打包
npm run build文章來源地址http://www.zghlxwxcb.cn/news/detail-494443.html
到了這里，關(guān)于webpack處理js兼容性問題之core-js的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
