上篇的Babel配置，也不是所有场景都适用的，比如我们在开发一个类库的时候，或者开发一个第三方根模块的时候，又或者开发一个组件库的时候，用
@babel/polyfill这种方案实际上是有问题的，因为它在注入Promise或者map方法的时候，会通过全局变量的方式去注入，会污染到全局环境，所以如果我们打包一个UI组件库或者类库的时候，要换一种打包的方式，或者换一种配置的方式。
那具体该怎么配置呢？
- 官网找到
transform-runtime，按照提示安装
image.png
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
-
安装好以后，配置corejs一定要从false改委2，这样当页面上不存在map方法，promise方法的时候，它才会把代码打包到main.js里边，如果不配置，是不会帮我们打包进来的。
image.png - 然后运行打包命令
npx webpack就可以了
注意
- 如果写的只是业务代码，那么只需要配置
presets就可以了，别忘了引入@babel/polyfill
image.png
image.png - 如果写的是一个库项目代码的时候，要使用
@babel/plugin-transform-runtime这个插件，这个插件的好处是可以有效的避免@babel/polyfill会污染全局环境的问题，而@babel/plugin-transform-runtime这个插件会以闭包的形式去注入或者说间接的帮助组件去引入对应的内容，不存在全局污染的概念，所以当我们写类库的时候，不去污染全局环境是一个更好的方案，
如果我们去详细的配置babel,会发现babel-loader下options里的内容会越来越多，越来越长，阅读起来比较困难，这个时候，我们可以把options里的内容提取出来，放入一个独立的文件内，这个文件叫做.babelrc,这个文件位于根目录下。
image.png
image.png
image.png
-
然后我们再运行打包，效果跟之前是一样的
image.png
