使用babel将ES6编译为ES5时，为什么浏览器需要polyfills文件

Question

如果babel将ES6转换为ES5并输出ES5文件，那么如果应用程序输出文件中恰好包含ES5代码，为什么浏览器需要包含polyfill文件？

Answer 1

Babel translates ES6 (and newer) code into ES5 code. For example, it rewrites arrow functions ( () => {} ) to ES5 functions ( function() {} ). However, ES6 is much more than just some new syntax.

https://babeljs.io :

Since Babel only transforms syntax (like arrow functions), you can use babel-polyfill in order to support new globals such as Promise or new native methods like String.padStart (left-pad). It uses core-js and regenerator. Check out our babel-polyfill docs for more info.

All the new functions need to be implemented with a polyfill. And these polyfills must be included globally to your project. Otherwise every usage of an ES6 function would be replaced by the implementation of that function in ES5 code. So if you use eg Array#findIndex ten times, the transpiled code would also contain the implementation ten times. That is why the polyfills have to be added globally and are not just added by the transpilation step.