Promise垫片的调研

目的

  1. 为了兼容低版本浏览器,
  2. 不必每次使用promise的时候都要重新引用

方案
目前社区中是引用core-js的方式解决此问题,目前推荐的是版本3,2版本存在的有些问题,会有breack change的情况

  1. 解决方式1
    直接引用
    import ‘core-js’
    Promise.resolve(42).then(x => console.log(x))
    按需引用
    import ‘core-js/actual/promise’
    import ‘core-js/feature/promise’

Promise.resolve(42).then(x => console.log(x))

2.webpack按需引入
babel.config.js
module.exports = {
presets:[
[
“@babel/preset-env”,
{useBuiltIns:“usage”,
corejs:{
//core-js的版本
version:“3”,
// 是否支持 ECMAScript 提案
proposals:true
}
]
]
}
目前core-js推荐使用babel 7.4.0之后的版本,Babel 7.3 之前,useBuiltIns: usage 不稳定且不是足够可靠:许多 polyfills 不包函,并且添加了许多不是必须依赖的 polyfill

不包含的polyfill
1.String 的 normalize,如果需要请使用 unorm, 因为体积太大了
2.Proxy
3.window.fetch
4.bigInt

core-js支持的polyfill
1.Object
es.object.assign, es.object.create, es.object.define-getter, es.object.define-property, es.object.define-properties, es.object.define-setter, es.object.entries, es.object.freeze, es.object.from-entries, es.object.get-own-property-descriptor, es.object.get-own-property-descriptors, es.object.get-own-property-names, es.object.get-prototype-of, es.object.has-own, es.object.is, es.object.is-extensible, es.object.is-frozen, es.object.is-sealed, es.object.keys, es.object.lookup-setter, es.object.lookup-getter, es.object.prevent-extensions, es.object.proto, es.object.to-string, es.object.seal, es.object.set-prototype-of, es.object.values.

2.Array
es.array.from, es.array.is-array, es.array.of, es.array.copy-within, es.array.fill, es.array.find, es.array.find-index, es.array.find-last, es.array.find-last-index, es.array.iterator, es.array.includes, es.array.push, es.array.slice, es.array.join, es.array.unshift, es.array.index-of, es.array.last-index-of, es.array.every, es.array.some, es.array.for-each, es.array.map, es.array.filter, es.array.reduce, es.array.reduce-right, es.array.reverse, es.array.sort, es.array.flat, es.array.flat-map, es.array.unscopables.flat, es.array.unscopables.flat-map, es.array.at

  1. String and RegExp
    es.string.from-code-point, es.string.raw, es.string.iterator, es.string.split, es.string.code-point-at, es.string.ends-with, es.string.includes, es.string.repeat, es.string.pad-start, es.string.pad-end, es.string.starts-with, es.string.trim, es.string.trim-start, es.string.trim-end, es.string.match-all, es.string.replace-all, es.string.at-alternative.

es.string.anchor, es.string.big, es.string.blink, es.string.bold, es.string.fixed, es.string.fontcolor, es.string.fontsize, es.string.italics, es.string.link, es.string.small, es.string.strike, es.string.sub, es.string.sup, es.string.substr, es.escape and es.unescape.

es.regexp.constructor, es.regexp.dot-all, es.regexp.flags, es.regexp.sticky and es.regexp.test.

4.Number
es.number.epsilon, es.number.is-finite, es.number.is-integer, es.number.is-nan, es.number.is-safe-integer, es.number.max-safe-integer, es.number.min-safe-integer, es.number.parse-float, es.number.parse-int, es.number.to-exponential, es.number.to-fixed, es.number.to-precision, es.parse-int, es.parse-float.

5.Math
es.math.acosh, es.math.asinh, es.math.atanh, es.math.cbrt, es.math.clz32, es.math.cosh, es.math.expm1, es.math.fround, es.math.hypot, es.math.imul, es.math.log10, es.math.log1p, es.math.log2, es.math.sign, es.math.sinh, es.math.tanh, es.math.trunc.

6.Date
es.date.to-string, ES5 features with fixes: es.date.now, es.date.to-iso-string, es.date.to-json and es.date.to-primitive.

es.date.get-year, es.date.set-year and es.date.to-gmt-string.

7.Promise
es.promise, es.promise.all-settled, es.promise.any and es.promise.finally.

8.Symbol
es.symbol, es.symbol.async-iterator, es.symbol.description, es.symbol.has-instance, es.symbol.is-concat-spreadable, es.symbol.iterator, es.symbol.match, es.symbol.replace, es.symbol.search, es.symbol.species, es.symbol.split, es.symbol.to-primitive, es.symbol.to-string-tag, es.symbol.unscopables, es.math.to-string-tag.

9.Map,Set,WeakMap,WeakSet
10. Typed Arrays
Implementations and fixes for ArrayBuffer, DataView, Typed Arrays constructors, static and prototype methods. Typed arrays work only in environments with support descriptors (IE9+), ArrayBuffer and DataView should work anywhere.
Modules es.array-buffer.constructor, es.array-buffer.is-view, es.array-buffer.slice, es.data-view, es.typed-array.int8-array, es.typed-array.uint8-array, es.typed-array.uint8-clamped-array, es.typed-array.int16-array, es.typed-array.uint16-array, es.typed-array.int32-array, es.typed-array.uint32-array, es.typed-array.float32-array, es.typed-array.float64-array, es.typed-array.copy-within, es.typed-array.every, es.typed-array.fill, es.typed-array.filter, es.typed-array.find, es.typed-array.find-index, es.typed-array.find-last, es.typed-array.find-last-index, es.typed-array.for-each, es.typed-array.from, es.typed-array.includes, es.typed-array.index-of, es.typed-array.iterator, es.typed-array.last-index-of, es.typed-array.map, es.typed-array.of, es.typed-array.reduce, es.typed-array.reduce-right, es.typed-array.reverse, es.typed-array.set, es.typed-array.slice, es.typed-array.some, es.typed-array.sort, es.typed-array.subarray, es.typed-array.to-locale-string, es.typed-array.to-string, es.typed-array.at.

11.Reflect
es.reflect.apply, es.reflect.construct, es.reflect.define-property, es.reflect.delete-property, es.reflect.get, es.reflect.get-own-property-descriptor, es.reflect.get-prototype-of, es.reflect.has, es.reflect.is-extensible, es.reflect.own-keys, es.reflect.prevent-extensions, es.reflect.set, es.reflect.set-prototype-of.

12.JSON
es.json.to-string-tag and es.json.stringify.
以及更多

使用
在babel中如何使用请看这篇browserslist与babelrc,postcss

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值