开放原子开发者工作坊

Babel默认只是转换新的语法（简单转换语法糖），如箭头函数等，但不会转换新的API，如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法，例如Object.assign，因此我们需要polyfill
备注：polyfill，一个js库
因为其是一个js库，因此需要在源代码最前面导入运行，且得成为上线依赖dependency，而不仅仅是一个开发依赖devDependency

 

.babelrc写法
旧版 
"presets": ["es2015"]  //简写，意思是babel-preset-es2015

"pulgins": ["transform-runtime"] //简写，意思是babel-plugin-transform-runtime

而在新版

 

"presets": ["@babel/preset-es2016"]  //新版本的babel预设，插件都得写完整名称

"presets": ["@babel/plugin-transform-runtime"]  //新版本的插件，插件都得写完整名称

 

兼容语法糖
使用预设
babel-preset-es2015

babel-preset-es2016

babel-preset-es2017

每年都出新的规范（语法糖），于是每年出一款针对此年变化的预设
而babel-preset-env包含所有预设，能兼容所有语法糖

 

关于babel-preset-env的配置，可写在.babelrc，package.json中可写一部分(例如browsersList)，甚至webpack.config.js里都能写，但这几个地方分优先级，.babelrc优先级最好，为了统一，最好都写在.babelrc。

browserList的写法，可见：https://juejin.im/post/5b8cff326fb9a019fd1474d6

 

兼容api

使用插件

 

babel-polyfill

为全局变量添加方法，会污染全局环境

babel-pulgin-transform-runtime 建议开发依赖

babel-runtime 建议线上依赖

可见：https://babeljs.io/docs/en/babel-plugin-transform-runtime