babel如何根据不同浏览器编译不同js

Question

问题描述
babel中babel-preset-env可以根据不同的浏览器版本针对这些版本进行选择性编译
例如

{
"presets": [
    ["env",{
        "targets": {
            "chrome": 25,
            "browsers": ["last 2 versions","safari 7"]
        }
    }]
]
}

上边的意思就是针对大部分浏览器最新的两个版本以及IE 7+以及chrome25版本进行转码编译
但是这样只是针对需要转码的浏览器做的一套适配，像高版本chrome浏览器已经支持了es6，那么肯定就不需要转码了，所以我想问下怎么针对不同浏览器做转码与不转吗或者部分转码的适配

说下自己的理解
1 针对不同浏览器版本每次手动配置babel并且编译出不同的js，然后页面中有个初始检查模块用来检测当前浏览器版本，然后调用不同的js（支持es6的使用最新语法js，不支持的使用转码的js）
2 针对不同浏览器版本每次手动配置babel并且编译出同一个js，但是这个js里面可以根据不同浏览器选择不同的方法来执行（目测这种方式肯定不行，为了适配增加了不必要的代码，而且实行起来可能也很麻烦）

总结：所以babel是如何做到真正按需分配的？

Answer 1

babel只是按照你配置的环境进行转码了啊,所谓的转码其实也就是把一些浏览器不支持的新语法,转换成老语法.

你的问题是问你要如何做到兼容所有版本浏览器吗? 还是不知道babel如何按照浏览器转码?

1. 兼容所有浏览器只需要兼容低版本就可以了,因为js大部分特性是可以做到向下兼容的.也就是新浏览器仍然支持老语法.

2. babel按照你输入的浏览器版本和其他条件,去查询对应的js支持版本,然后找到所有条件下支持的最高级别Js版本,转码到该版本.转码过程跟浏览器没有任何关系,只是在node环境中进行.

Answer 2

竟然是2017年的老问题啦，不知道题主现在怎么看待这个问题呢？babel的语法转化过程发生在构建时，构建后的代码，我们发现其实也没有判断当前浏览器是否已经实现了这个语法，而是直接转化。但是polify的部分都是在运行时，启用corejs，并配置后，会根据当前代码的情况引入一些polify，观察polify的实现，内部会判断运行时浏览器是否支持当前api，如果支持，则使用新的api，不支持则用babel实现的。
我也思考为什么语法转换部分不能这么做呢？我想到的是如果这么做的话，在只构建一份dist代码的情况下，同时具备新老语法，代码体量会增大很多，远超polify的工作量。
像之前同学回答的，借助服务端针对不同版本的浏览器进行单独打包，以及识别分发。这又是有一定的成本。
综合比较，最简单的实现也就是直接对高版本语法进行降级。

Answer 3

本人新手，凑个热闹，说的不对的，请指正：你的主要的想法是不是，针对某一段代码，如果运行环境（浏览器）支持新语法，则使用新语法来实现，不然就用旧语法？见过一些兼容性的代码里，在使用某一个新语法时，会先去判断运行环境是不是支持，（一下子举不出什么例子，但是印象深刻的是针对IE有很多），这可能是ployfill的作用了。