ES6的新API如Promise,Proxy,Array.form(),Object.assign()等,Babel不能转码, 使用babel-polyfill来解决

Babel默认只转换新的JavaScript句法（syntax），而不转换新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise、Async等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。

举例来说，ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

下面为具体配置方法
react及vue框架配置(使用webpack时，2、3项配置一个即可，推荐进行第3项配置)
1.安装
   npm install --save babel-polyfill

2.在react或vue的项目入口文件头部导入babel-ployfill

 import ‘babel-polyfill‘;

3.在webpack的配置文件入口处，加入babel-polyfill

   {entry: [

　　‘babel-polyfill‘,

　　paths.appIndexJs

   ]}

配置完成后便可以使用这些新API来愉快的开发

IE坑
1.IE打开为空白页面，首先引入babel-polyfill.
2.IE就算是引入babel-polyfill依然无法使用Proxy对象，建议在IE中最好不要用
3.vue中按需引入iview组件在IE中报eval错误
(1).安装babel-plugin-import
npm i babel-plugin-import -D

(2). 配置.babelrc文件,在plugins添加最后一项

(3). 按需引入并注册为vue组件

(4)扯远了，解决bug[qq:29]，配置编译导入组件的loader

原文地址：https://www.cnblogs.com/andy-lehhaxm/p/10575671.html

时间： 2024-07-30 02:44:18

ES6的新API如Promise,Proxy,Array.form(),Object.assign()等,Babel不能转码, 使用babel-polyfill来解决的相关文章

ES6的新特性-让前后端差异越来越小

ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份放出正式敲定的版本.但大部分标准已经就绪,且各浏览器对ES6的支持也正在实现中. 潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS的风采. 1.箭头操作符 如果你会C#或者Java,

【es6】js原生的promise

JavaScript 是单线程的,这意味着任何两句代码都不能同时运行,它们得一个接一个来.在浏览器中,JavaScript 和其他任务共享一个线程,不同的浏览器略有差异,但大体上这些和 JavaScript 共享线程的任务包括重绘.更新样式.用户交互等,所有这些任务操作都会阻塞其他任务. 一.事件的不足 对于那些执行时间很长,并且长时间占用线程的代码,我们通常使用异步来执行,但是又如何判断其是否执行完毕或者失败呢?我们通常使用事件监听,但事件监听只能监听绑定之后发生的事件,但有可能你写绑定事件代

ES6相关新特性介绍

你可能已经听说过 ECMAScript 6 (简称 ES6)了.ES6 是 Javascript 的下一个版本,它有很多很棒的新特性.这些特性复杂程度各不相同,但对于简单的脚本和复杂的应用都很有用.在本文中,我们将讨论一些精心挑选的 ES6 特性,这些特性可以用于你日常的 Javascript 编码中. 请注意,当前浏览器已经全面展开对这些 ES6 新特性的支持,尽管目前的支持程度还有所差异.如果你需要支持一些缺少很多 ES6 特性的旧版浏览器,我将介绍一些当前可以帮助你开始使用 ES6 的解决

es6新增的api

从值的转换到数学计算,ES6给各种内建原生类型和对象增加了许多静态属性和方法来辅助这些常见任务.另外,一些原生类型的实例通过各种新的原型方法获得了新的能力. 注意: 大多数这些特性都可以被忠实地填补.我们不会在这里深入这样的细节,但是关于兼容标准的shim/填补,你可以看一下"ES6 Shim"(https://github.com/paulmillr/es6-shim/). Array 在JS中被各种用户库扩展得最多的特性之一就是数组类型.ES6在数组上增加许多静态的和原型(实例)的

ES6之新的数据结构

Set Set 类似于数组,是一种集合的数据结构,和 Array 之间最大的区别是: Set中所有的成员都是唯一的. 可以把Set想象成是一个: 既没有重复元素,也没有顺序概念的数组. Set 本身是一个构造函数,用来生成 Set 数据结构 const s1 = new Set(); s1.add(5) s1.add(2).add(1).add(3).add(2).add(4) console.log(s1); Set 函数可接受一个可循环的数据结构(如数组.类数组.含有 iterable 接口

ES6一些新特性记录

ES6一些新特性记录 1.箭头操作符 箭头操作符左边是需要输入的参数,右边是返回值 比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.foreach(function(v,i,a){ console.log(v); }); //es6写法 array.foreach(v => console.log(v)); 又比如一块简单的代码: function (i){ return i + 1}     //es5写法 (i) => i + 1

看es6 字符串新方法有感

'x'.repeat(3) // "xxx" 'hello'.repeat(2) // "hellohello" 'na'.repeat(0) // "" 'x'.padStart(5, 'ab') // 'ababx''x'.padStart(4, 'ab') // 'abax'   上面是es6的新方法 es5 prototype可以写出 无聊写了点 String.prototype.repead=function(n){ var arr=n

前端综合学习笔记---异步、ES6/7、Module、Promise同步 vs 异步

同步 vs 异步 先看下面的 demo,根据程序阅读起来表达的意思,应该是先打印100,1秒钟之后打印200,最后打印300.但是实际运行根本不是那么回事 console.log(100) setTimeout(function () { console.log(200) }, 1000) console.log(300) 再对比以下程序.先打印100,再弹出200(等待用户确认),最后打印300.这个运行效果就符合预期要求. console.log(100) alert(200) // 1秒钟

es6（var,let,const,set,map,Array.from()）

1.变量声明--var,const,let 1.1 var - (全局作用域,局部作用域)会有变量提升 //第一个小例子 <script> var num = 123; function fn(){ console.log(num); // undefined var num = 46; console.log(num) // 46 } fn() </script> //为什么第一个输出值会是undefined,而不是123呢?因为这里存在着变量名的提升,其实上述语句相当于: &l