babelrc笔记

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

 

 

你可能感兴趣的:(babelrc笔记)