preset与plugin的关系:
转换插件转换插件或者polyfill例如，默认情况下babel可以将
箭头函数，class等语法转换为ES5兼容的形式，但是却不能转换Map，Set，Promise等新的全局对象，这时候就需要使用polyfill去模拟这些新特性
package.json添加所需的依赖babel-plugin-transform-xxx.babelrc中的plugins项指定使用babel-plugin-transform-xxx插件import/require, .babelrc中不需要指定useBuiltIns, webpack.config.js中不需要做额外处理,一切由babel插件完成转换配置完一个转换插件后, 代码中每个使用这个API的地方的代码都会被转换成使用
polyfill中实现的代码
相比方法1, 相当于抽离了公共模块, 避免了重复引入, 从一个叫core.js的库中引入所需polyfill(一个国外大神用ES3写的ES5+ polyfill)
package.json中添加依赖babel-plugin-tranform-runtime以及 babel-runtime.babelrc中配置插件:"plugins": ["transform-runtime"]import/require额外东西, webpack也不需要做额外配置polyfill的对象是临时构造并被import/require的,并不是真正挂载到全局[].include(x), 依赖于Array.prototype.include仍无法使用<head>标签中引入babel-polyfill.js(CDN或本地文件均可)package.json中添加babel-polyfill依赖, 在webpack配置文件增加入口: 如entry: ["babel-polyfill",‘./src/app.js‘], polyfill将会被打包进这个入口文件中, 而且是放在文件最开始的地方package.json中添加babel-polyfill依赖, 在webpack入口文件顶部使用import/require引入,如`import ‘babel-polyfill‘``console也可以使用packge.json引入依赖babel-preset-env.babelrc中使用配置preset-envuseBuiltins选项为truewebpack入口文件中使用import/require引入polyfill, 如import ‘babel-polyfill‘babel会根据指定的浏览器兼容列表自动引入所有所需的polyfill, 不管你代码中有没有使用{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["ie >=9"]
},
"useBuiltIns": true,
"debug": true
}]
]
}
按需(按照指定的浏览器环境所需)引入polyfill, 一定程度上减少了不必要polyfill的引入
配置简单, 无需对webpack做额外的配置
注意:
polyfill在所有其它脚本之前被执行(首行import或者设置为html的第一个<head>标签)CDN方式提供的polyfill, 可根据浏览器UserAgent自动返回合适的polyfill, 详细内容自行google原文：https://www.cnblogs.com/zhishaofei/p/10058132.html