需求分析:
- 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标签引入
// https://cdn.bootcss.com/babel-polyfill/7.0.0-rc.4/polyfill.min.js
<script src="js/polyfill.min.js"></script>
三、引入的polyfill.min.js文件,必须放在main.min.js前面
意思就是必须放在你用过 es6的api 的js文件前面
四、引入的polyfill.min.js文件之后,不再报错
.
项目地址(别忘了给星哦)
相关文章
gulp构建项目(一):环境准备及项目基础结构搭建
gulp构建项目(二):browser-sync启本地服务并开启浏览器
gulp构建项目(三):gulp-watch监听文件改变、新增、删除
gulp构建项目(四):run-sequence实现逐个执行任务
gulp构建项目(五):gulp-if条件判断及环境变量设置
gulp构建项目(六):gulp-html-tpl处理公用模板
gulp构建项目(七):gulp-uglify压缩js以及检查js语法错误
gulp构建项目(八):gulp编译less,添加CSS前缀以及压缩css
gulp构建项目(九):gulp-imagemin压缩图片及gulp-cache缓存
gulp构建项目(十):gulp-rev-collector-dxb添加版本号(?hash)
gulp构建项目(十一):gulp-htmlmin压缩html
gulp构建项目(十二):gulp-babel编译es6
gulp构建项目(十三):babel-polyfill编译es6新增api
gulp构建项目(十四):gulp-rename重定义打包生成文件的路径
.
gulp构建项目(附录一):gulp发生错误时,进程挂掉的问题