webpack学习笔记三, 关于 polyfill & babel-plugin-transform-runtime

我们都知道,在ES6中新增了很的方法.

比如下面这些:

Array.prototype.forEach
Array.prototype.map
String.prototype.startWith
......

这些都是在ES6中新增的,如果一个浏览器并不支持ES6的语法,那么肯定也不会存在这些方法.

但是我们写代码的时候,又希望用到这些方法.

并希望,webpack在打包的时候,能够[有谁]可以帮我们判断一下.

如果当前的浏览器不支持这些方法的话,就使用平滑后退的方式去处理.

虽然 babel 可以转化 ES6 -> ES5.

但是对于 ES6 里面新增的这些方法,它就无能为力的.

babel 只处理语法层面的问题.不能处理API相关的问题.

webpack 仅仅是一个处理文件依赖关系,并打包的工具.
它更无能为力.

开始例子

首先定义一个 ES6FN.js 的文件.

let moduleName = 'es6方法'
export default {
  moduleName,
  useMap () {
    console.log('usermap')
    let obj = {
      name: '李四',
      age: 22
    }
    // Object.keys() ,map  都是 ES6 新增的方法.
    return Object.keys(obj).map(key => {
      return {
        keyName: key,
        keyValue: obj[key]
      }
    })
  },
  toString () {
    console.log(`${this.keyName} ${this.keyValue}`)
  }
}

首先用 webpack + babel 打包一次.
证明,babel 只能转换语法,不能转化API

查看结果

babel只能转换语法，不能转化API

let -> var
userMap() -> useMap:function(){}

说明语法转换确实完成.

Object.keys() & map() 仍然存在,证明 babel 仅仅只能转化语法.

最终使用 webpack + babel 生成的代码.
虽然在语法层面成功的从 ES6 -> ES5.
但是由于代码中使用了 ES6 新增的一些方法.
所以,这份打包好的代码,最终在一些不支持 ES6特性的浏览器中,仍然是无法运行和使用的.

所以,仅仅是语法转化是不行的.

使用 babel-polyfill

babel-polyfill 是一个用于解析目标代码中,是否包含 ES6 新增方法的脚本.
如果它发现了里面有,就会以当前浏览器支持的方式转换这些方法以便可以正常运行.

之前在浏览器中,我们一般会这么引用.

<script src='babel-polyfill.js' />
<script src='es6-fn-in-this-file.js'></script>

其实也是同样的原理,
我们只需要在我们打包代码的最前面加载 babel-polyfill 的 js 代码即可.

npm i babel-polyfill

关于 babel-polyfill使用的两种方式

配置 webpack.config.js 里的 entry 设置为 entry: ['babel-polyfill',path.join(__dirname, 'index.js')]

webpack.config.js.entry配置成数组

运行打包 npm run build

image.png

打包成功.文件大小 280KB

在 webpack.config.js 配置的主入口 index.js 文件的最顶层键入 import 'babel-polyfill'

import 方式导入 babel-polyfill

运行打包 npm run build

image.png

同样也打包成功.文件大小 280KB.

打开其中任意一份打包好的代码,查看 Object.keys().map() 方法是否仍然存在.

image.png

发现这些只属于 ES6的方法仍然是存在的.

那么 babel-polyfill 肯定是通过某种方式(垫片),添加了这些方法,让我们可以正常的这样去调用.

至于这些垫片加载哪,如何做到的..我没有在原始的代码中找到相应的位置.

本地也没有低版本的浏览器.所以暂时先不做测试.

使用 babel-plugin-transform-runtime

我们之前利用的 babel-polyfill ,使用垫片支持我们本来使用的ES6语法,
打包成功之后,文件的大小是 280KB

我们在看一下,之前没有使用 babel-polyfill 之前的打包出来的文件是多大.

image.png

两则相差大概 81.6倍

原因是 webpack 把 babel-polyfill 整体全部都打包进去了.
而babel-polyfill 肯定也实现了所有 ES6新API的垫片,文件一定不会小.
所以,文件变的这么大,也在常理之中了.

那么有没有一种办法,根据实际代码中用到的 ES6新增API ,来使用对应的垫片,而不是全部加载进去呢?

使用 babel 提供的 babel-runtime & babel-plugin-transform-runtime 就可以满足要求.

首先安装这两个包.
- npm i --save-dev babel-runtime babel-plugin-transform-runtime
在 .babelrc 里配置
- plugins:["tranform-runtime"]

image.png

最后运行 npm run build

打包结果

image.png

利用babel-runtime & babel-plugin-transform-runtime按需加载垫片的方式,最终打包出来的结果仅仅只是 17.4kb.比之前的 280KB要小了许多.

最后总结:

babel 仅仅只能将 es6->es5. 如果源代码中使用 ES6 新增的API(**Object.keys() & [].map()**),babel就无能为力了.
babel-polyfill 可以解决这个问题,但是会造成打包的文件大小变的巨大.
- babel-polyfill 内部实现了所有的新API的垫片功能
- 在打包的时候,会将整个 babel-polyfill 都打包进去.
- 所以最终打包出来的文件,就会变的很大(280KB).
babel-runtime & babel-plugin-transform-runtime 是 babel 提供的类似 babel-polyfill 功能的一个插件.
- 它可以根据实际源代码使用到的 ES6新增API按需打入垫片.
- 最终打包的大小结果是 : 17.4KB
最重要的有点:不管是使用babel-polyfill
还是 babel-runtime & babel-plugin-transform-runtime 的目的就是:
转换那些我们写在源文件中的ES6方法添加垫片,
能够被无法识别的低浏览器也能够正常运行webpack最终打包出来的js文件.

babel 解决 语法层面的问题
babel-runtime & babel-plugin-transform-runtime解决API层面的问题.