webpack4.0 入门实践教程(7)

babel/polyfill 和 transform-runtime

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。

babel-polyfill: 如上述所说，对于新的 API，你可能需要引入 babel-polyfill 来进行兼容

关键点

• babel-polyfill 是为了模拟一个完整的 ES2015+环境，旨在用于应用程序而不是库/工具。
• babel-polyfill 会污染全局作用域

babel-runtime 的作用：

• 提取辅助函数 。ES6 转码时，babel 会需要一些辅助函数，例如 _extend。babel 默认会将这些辅助函数内联到每一个 js 文件里， babel 提供了 transform-runtime 来将这些辅助函数“搬”到一个单独的模块 babel-runtime 中，这样做能减小项目文件的大小。
• 提供 polyfill ：不会污染全局作用域，但是不支持实例方法如 Array.includes

babel-runtime 更像是分散的 polyfill 模块，需要在各自的模块里单独引入，借助 transform-runtime 插件来自动化处理这一切，也就是说你不要在文件开头 import 相关的 polyfill ，你只需使用， transform-runtime 会帮你引入。

对于开发应用来说，直接使用上述的按需 polyfill 方案是比较方便的，但如果是开发工具、库的话，这种方案未必适合（ babel-polyfill 是通过向全局对象和内置对象的 prototype 上添加方法实现的，会造成全局变量污染）。Babel 提供了另外一种方案 transform-runtime ，它在编译过程中只是将需要 polyfill 的代码引入了一个指向 core-js 中对应模块的链接(alias)。关于这两个方案的具体差异和选择，可以自行搜索相关教程，这里不再展开，下面提供一个 transform-runtime 的参考配置方案。

首先安装 runtime 相关依赖

npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -S

修改 .babelrc

{
 //...
 "plugins": ["@babel/plugin-transform-runtime"]
}

打包前清理源目录文件 clean-webpack-plugin

每次打包，都会生成项目的静态资源，随着某些文件的增删，我们的 dist 目录下可能产生一些不再使用的静态资源，webpack 并不会自动判断哪些是需要的资源，为了不让这些旧文件也部署到生产环境上占用空间，所以在 webpack 打包前最好能清理 dist 目录。

npm install clean-webpack-plugin -D