babel配置

overview

首先是因为在开发过程中使用async，但是报如下错误

image.png

然后就去找解决方案，过程中找到了babel-polyfill，babel-plugin-transform-runtime，babel-runtime，然后去了解每个package的作用

usage of babel

罗列了babel全家桶每个部分的意义和使用

npm i babel-plugin-*

babel-plugin-* 代表了一系列的转码插件，如babel-plugin-transform-es2015-arrow-functions 用于转码 es6 中的箭头函数，babel-plugin-transform-async-to-generator 用于将 es7 中的 async 转成 generator。

npm i babel-preset-*

使用babel-plugin-，我们可以实现按需加载，但是在实际开发中，我们不可能一个插件一个插件去安装，而babel-prese-就帮我们预设好了开发环境需要用到的插件，例如babel-preset-es2015表示转换ES6语法需要的插件，babel-preset-stage-2表示stage2草案的语法的插件，类似餐厅里的套餐，plugin就是单点

npm i babel-runtime / babel-polyfill

plugins和preset只能用来转换新语法，但是不能转换api，什么意思呢，例如arrow function，const，let，async是新语法，但是async转换成generator时如果浏览器不支持，还是需要使用polyfill

babel-runtime和babel-polyfill的功能相同，但是实现的方式不一样，babel-polyfill直接在污染全局，例如要让node0.1.0支持Promise，babel-polyfill的做法是直接在全局挂上Promise对象，而babel-runtime的实现方式是引入一个helper函数const Promise = require('babel-runtime/core-js/promise')，但是babel-runtime其实会有重复引用的问题，因为每个使用的地方都引入了Promise这个helper函数，babel为了解决这个问题，开发了babel-plugin-transform-runtime，用来把helper函数放在公共部分引入，而不是在每个js文件中内连helper函数

还有值得注意的一点是，babel-runtime不转码实例方法，必须使用babel-polyfill，因为babel-polyfill是直接在原型链上增加方法

'!!!'.repeat(3);
'hello'.includes('h');

reference

Runtime transform
Polyfill
Babel 全家桶