>[success] # babel -- 初步上手之各種配置(babel-polyfills )(未來) ~~~ 1.需要讓babel 配合插件幫助進行語法 轉換這里選擇的是'@babel/env' 2.對'api' 轉換需要配合'core-js' 和 'regenerator-runtime/runtime',但是利用'@babel/preset-env '中提供 'useBuiltins' 可以不用手動的去在全局文件引入'core-js' 和 'regenerator-runtime/runtime' 3.在'語法轉換'的時候'@babel/helpers' 會提供一些用來幫助轉換的'helper'函數 ，但是希望進一步優化 這時候需要使用'@babel/plugin-transform-runtime'配合'@babel/runtime',可以幫助解決 '移除語法轉換后內聯的輔助函數'使用'runtime-corejs3' 解決全局污染墊片污染問題 4.但二者都存在彼此優缺點，'@babel/env' 可以用target 但是不能幫助函數和全局污染，'@babel/plugin-transform-runtime' 不能用target 但是能幫助函數和全局污染，但是可以通過同時配置兩者讓他們互相解決自己短板 可以參考總結篇章 ~~~ >[danger] ##### 要解決的問題 ~~~ 1.如果使用 @babel/preset-env 走 useBuiltIns: usage 搭配 browserlist 的這種 polyfill 的方式的話，polyfill 是會污染全 局的(entry 模式也是污染全局)。不過這種配置的方式會依據目標打包平臺來一定程度上減少不需要被加入到編譯打包 流程的 polyfill 的數量，因此這種方式也對應的能較少 bundle 最終的體積大小。 2.如果是走 @babel/plugin-transform-runtime 插件的 polyfill 的話不會污染全局。但是這個插件沒法利用 browserlist 的 目標平臺配置的策略。因此在你代碼當中只要是使用了 ES6+ 的新 api，一律都會引入對應的 polyfill 文件（而不考慮 這個新的 api 是否被目標瀏覽器已經實現了），這樣也會造成 bundle 體積增大。針對這個問題 ~~~ >[danger] ##### 使用babel-polyfills ~~~ 1.下面兩個參考鏈接的內容都是對'@babel/preset-env 與 @babel/plugin-transform-runtime 互斥問題' 情況說明 2.官方提供了新的解決方案 'babel-polyfills'，注意這里有's' 和上面說的'babel-polyfill'不同，它可以解決 '@babel/plugin-transform-runtime ' 無法利用'browserlist ' 問題，'https://github.com/babel/babel-polyfills'這是 他的項目地址 2.1.使用的時候需要'npm i babel-plugin-polyfill-corejs3' 對它的就像你看到安裝包和項目地址名字看起來不是 那么一樣，這里可以看到他的更多版本'https://github.com/babel/babel-polyfills/tags' 2.2.使用的時候也是要在babel 文件配置，新的配置如下： { "targets": { "firefox": 42 }, "presets": ["@babel/preset-env"], "plugins": [ ["polyfill-corejs3", { "method": "usage-global" }] ] } 這里要對'method'做說明 2.2.1.'entry-global: 這個和之前的 useBuiltIns: entry 對標，就是全局引入 polyfill' 2.2.2.'usage-entry: 這個和 useBuiltIns: usage 對標，就是具體模塊引入用到的 polyfill。' 2.2.3.'usage-pure：這個就是之前需要 transform-runtime 插件做的事情，使用不污染全局變量的 pure 的方式引入具體模塊用到的 polyfill.' 注意：請在targets 這個字段配置你的'browserlist '，一點過注意文檔中的這句話 '“舊”配置不支持 polyfills 的目標，但您可能希望通過將targets選項移動到頂級來啟用它們。' 否則你的配置將不生效 請一定要將targets 移動到配置項頂級 'https://github.com/babel/babel-polyfills/blob/%40babel/helper-define-polyfill-provider%400.2.3/docs/migration.md' 這里有具體的使用方案一定要看 ~~~ >[danger] ##### 參考 [# Babel7 相關](https://github.com/CommanderXL/Biu-blog/issues/52) [# @babel/preset-env 與 @babel/plugin-transform-runtime 互斥問題](https://github.com/babel/babel/issues/10271#issuecomment-528379505) [回顧 babel 6和7，來預測下 babel 8 ](https://juejin.cn/post/6956224866312060942#heading-3)