babel-polyfill的几种使用方式
2017-11-21 本文已影响10548人
荣儿飞
前言
preset与plugin的关系:
- preset中已经包含了一组用来转换ES6+的语法的插件,如果只使用少数新特性而非大多数新特性,可以不使用preset而只使用对应的
转换插件 - babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的
转换插件或者polyfill
例如，默认情况下babel可以将
箭头函数，class等语法转换为ES5兼容的形式，但是却不能转换Map，Set，Promise等新的全局对象，这时候就需要使用polyfill去模拟这些新特性
1. 使用转换插件: babel-plugin-transform-xxx
- 使用方法
- 缺啥补啥,在
package.json添加所需的依赖babel-plugin-transform-xxx - 在
.babelrc中的plugins项指定使用babel-plugin-transform-xxx插件 - 代码中不需要显式
import/require,.babelrc中不需要指定useBuiltIns,webpack.config.js中不需要做额外处理,一切由babel插件完成转换
- 缺啥补啥,在
- 优点
- 作用域是模块,避免全局冲突
- 是按需引入,避免不必要引入造成及代码臃肿
- 缺点
- 每个模块内单独引用和定义polyfill函数,造成了重复定义,使代码产生冗余
配置完一个转换插件后, 代码中每个使用这个API的地方的代码都会被转换成使用
polyfill中实现的代码
2. 使用插件 babel-runtime 与 babel-plugin-tranform-runtime
相比方法1, 相当于抽离了公共模块, 避免了重复引入, 从一个叫core.js的库中引入所需polyfill(一个国外大神用ES3写的ES5+ polyfill)
- 使用方法
-
package.json中添加依赖babel-plugin-tranform-runtime以及babel-runtime -
.babelrc中配置插件:"plugins": ["transform-runtime"] - 接下来, 代码中可以直接使用ES6+的新特性,无需
import/require额外东西,webpack也不需要做额外配置
-
- 优点
- 无全局污染
- 依赖统一按需引入(polyfill是各个模块共享的), 无重复引入, 无多余引入
- 适合用来编写lib(第三方库)类型的代码
- 缺点
- 被
polyfill的对象是临时构造并被import/require的,并不是真正挂载到全局 - 由于不是全局生效, 对于实例化对象的方法,如
[].include(x), 依赖于Array.prototype.include仍无法使用
- 被
3. 全局babel-polyfill(不使用useBuiltIns)
- 使用方法
- 法3.1: (浏览器环境)单独在html的
<head>标签中引入babel-polyfill.js(CDN或本地文件均可) - 法3.2: 在
package.json中添加babel-polyfill依赖, 在webpack配置文件增加入口: 如entry: ["babel-polyfill",'./src/app.js'], polyfill将会被打包进这个入口文件中, 而且是放在文件最开始的地方 - 法3.3: 在
package.json中添加babel-polyfill依赖, 在webpack入口文件顶部使用import/require引入,如`import 'babel-polyfill'``
- 法3.1: (浏览器环境)单独在html的
- 优点
- 一次性解决所有兼容性问题,而且是全局的,浏览器的
console也可以使用
- 一次性解决所有兼容性问题,而且是全局的,浏览器的
- 缺点
- 一次性引入了ES6+的所有polyfill, 打包后的js文件体积会偏大
- 对于现代的浏览器,有些不需要polyfill,造成流量浪费
- 污染了全局对象
- 不适合框架或库的开发
4. 全局babel-polyfill(使用babel-preset-env插件和useBuiltIns属性)
- 使用方法
-
packge.json引入依赖babel-preset-env -
.babelrc中使用配置preset-env - 指定
useBuiltins选项为true - 指定浏览器环境或node环境, 配置需要兼容的浏览器列表
- 在
webpack入口文件中使用import/require引入polyfill, 如import 'babel-polyfill' - 以上配置完成之后,
babel会根据指定的浏览器兼容列表自动引入所有所需的polyfill, 不管你代码中有没有使用
-
- .babelrc示例
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["ie >=9"]
},
"useBuiltIns": true,
"debug": true
}]
]
}
- 优点
-
按需(按照指定的浏览器环境所需)引入
polyfill, 一定程度上减少了不必要polyfill的引入 -
配置简单, 无需对
webpack做额外的配置 -
注意:
- 不可与方法3混用,否则会引起冲突
- 全局方式要保证
polyfill在所有其它脚本之前被执行(首行import或者设置为html的第一个<head>标签)
-
5. polyfill.io
- 一个
CDN方式提供的polyfill, 可根据浏览器UserAgent自动返回合适的polyfill, 详细内容自行google
