轻松学 Webpack 4 免费视频教程 #18 @babel/runtime

https://www.qiuzhi99.com/movies/qing-song-webpack-4-15-babel-polyfill-nei-xie-shi-er-part-1-1

https://babeljs.io/docs/en/next/babel-polyfill

https://babeljs.io/docs/en/next/babel-runtime.html

https://segmentfault.com/a/1190000008159877

https://zhuanlan.zhihu.com/p/29058936

https://juejin.im/entry/5b108f4c6fb9a01e5868ba3d

https://www.jianshu.com/p/73ba084795ce

http://bluebirdjs.com/docs/getting-started.html

babel只负责语法转换，比如将ES6的语法转换成ES5。但如果有些对象、方法，浏览器本身不支持，比如：

全局对象：Promise、WeakMap 等。

全局静态函数：Array.from、Object.assign 等。

实例方法：比如 Array.prototype.includes 等。

此时，需要引入babel-polyfill来模拟实现这些对象、方法。

引入babel-polyfill会有一定副作用，比如：

引入了新的全局对象：比如Promise、WeakMap等。
修改现有的全局对象：比如修改了Array、String的原型链等。
在应用开发中，上述行为问题不大，基本可控。但如果在库、工具的开发中引入babel-polyfill，则会带来潜在的问题。

举个例子，我在项目中定义了跟规范不一致的Array.from()函数（别管我为什么不一样，就是这么任性），同时引入了一个库（依赖babel-polyfill），此时，这个库可能覆盖了自定义的Array.from()函数，导致出错。

这就是babel-runtime存在的原因。它将开发者依赖的全局内置对象等，抽取成单独的模块，并通过模块导入的方式引入，避免了对全局作用域的修改（污染）。

import '@babel/polyfill'
Object.assign({})

Array.from([1,2,3])

new Promise(resolve => console.log('promise'))

function* geneFn() {
  yield 1
}

let g = geneFn()
g.next()

async function getPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data;
}

getPosts().then(posts => console.log(posts))