babel语法转化之preset用法-优快云博客

本文深入解析Babel 7的更新，特别是@babel/env预设的使用方式，它如何根据目标浏览器自动选择语法转换和polyfill导入，以实现更高效、更精简的代码打包。

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.cnblogs.com/mrzhu/p/11258467.html