gulp构建babel-polyfill编译es6新增api
gulp-babel只能将es6语法编译成es5,比如:箭头函数、let变量等,但是API不能编译,比如Object.assign.引用babel-polyfill编译es6新增api
需求分析:
es6语法以及提供的强大api给前端带来了很大便利,可是部分浏览器无法识别es6语法
gulp-babel只能将es6语法编译成es5,比如:箭头函数、let变量等,但是API不能编译,比如Object.assign
引用babel-polyfill编译es6新增api
一、IE浏览器无法识别ES6新增API
这里用的是ie浏览器,chrome是可以识别es6 api的,所以无法调试
二、如何引入babel-polyfill模块
1、webpack如何引入babel-polyfill模块
我们常见的就是:下载babel-polyfill模块、在入口文件顶部引入
//在入口文件顶部引入
require('babel-polyfill')
// 将babel-polyfill打包进入口文件中
entry: ["babel-polyfill",'./src/app.js']
2、gulp为什么不能这么引入
- webpack会将 require() 的模块自动打包,让浏览器可以识别,但是gulp是没有这个内置加载器的。
- 后续文章将讲述如何加入 require() 的模块支持
3、gulp直接通过script标签引入
意思就是必须放在你用过 es6的api 的js文件前面
四、引入的polyfill.min.js文件之后,不再报错
版权声明
本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。
评论