Babel默认只是转换新的语法(简单转换语法糖),如箭头函数等,但不会转换新的API,如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法,例如Object.assign,因此我们需要polyfill
备注:polyfill,一个js库
因为其是一个js库,因此需要在源代码最前面导入运行,且得成为上线依赖dependency,而不仅仅是一个开发依赖devDependency
备注:polyfill,一个js库
因为其是一个js库,因此需要在源代码最前面导入运行,且得成为上线依赖dependency,而不仅仅是一个开发依赖devDependency
.babelrc写法
旧版
"presets": ["es2015"] //简写,意思是babel-preset-es2015
旧版
"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