>[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)