babel语法转化之preset用法

小灰灰 2021-11-02 06:18 220阅读 0赞

babel之前用stage0 stage1 stage2 es2015 es2016做特殊语法的转换,现在babel用@babel/env来统一配置语法转换

"presets": [
            [
              "@babel/env",
              {
                targets: {
                  chrome: "53",
                  safari: "11.1",
                },
                "useBuiltIns": "usage",
                "corejs": 3,
                 "modules": false
              }
            ]
     ],

其中targets表示我们具体需要在哪些浏览器上使用,然后babel会针对这些具体浏览器来做转换,这是一个思路的巨大转变,之前babel把控制权交给我们,我们来决定转换什么语法,而现在babel让我们告诉我们需要运行在什么浏览器上,然后babel来做语法转换

如果之前使用过babel就知道babel有一个polyfill模块,因为babel默认只转换语法 对于api则不做转换  所以对于api的扩展 babel特意使用了polyfill来做扩展,然后如果无脑的全部引入polyfill 则必然导致文件的增大,babel采用的策略是根据你事先声明的target拿到你支持的浏览器,然后根据你的浏览器 判断你需要导入哪些polyfill,这个就是useBuiltIns设置为usage的作用

因为corejs2默认只支持2015年以前的api,所以我们需要在这里显示声明corejs的版本为3让polyfill把最新的api也给转换了

modules默认是false，意思是使用webpack的模块加载机制,同时支持amd commonjs umd

babel7的介绍:[https://www.jianshu.com/p/cbd48919a0cc][https_www.jianshu.com_p_cbd48919a0cc]

转载于:https://www.cnblogs.com/mrzhu/p/11258467.html

[https_www.jianshu.com_p_cbd48919a0cc]: https://www.jianshu.com/p/cbd48919a0cc