gulp构建babel-polyfill编译es6新增api

来源:网络 文章列表 2020-02-12 8
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文件之后,不再报错

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论

友情链接