webpack如何使用polyfill？

Question

我正在使用带有babel polyphill的webpack,所以我可以在es6中编写我的代码.

我不明白webpack如何使用polyfill所以我的代码可以在像IE这样的浏览器中得到支持？

例如,假设我们有一个简单的类

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  } 
}

由于IE不了解class关键字是什么,我的代码需要更改为:

function Polygon(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  } 

这些更改是在运行时发生的(使用类似于应该解释的代码的引用),还是webpack编译我的代码,以便生成的代码只是es5？

我的意思是,如果在运行时发生这种情况,我的包中会有更多的代码:我编写的代码+ polyphill ......

实际上,当使用webpack时,我的代码(更多)更大.

如果在运行时没有出现,那么为什么我必须将polyphill包含在我的依赖项中(而不是在我的dev依赖项中)？

谢谢

Answer 1

是webpack编译我的代码,以便结果代码只是es5？

是.Webpack包含babel-polyfill结果包的代码.

因此,如果使用native Promise,babel-polyfill则将自己的实现设置为全局命名空间(window.Promise).还有一个babel-runtime包不会触及全局命名空间,并Promise在webpack捆绑期间将您的代码解析为本地模块.

如果在运行时没有出现,那么为什么我必须将polyphill包含在我的依赖项中(而不是在我的dev依赖项中)？

因为应用程序babel-polyfill需要模块才能 在运行时正常工作.dependencies需要运行的应用程序,devDependencies仅用于开发,transpilation,测试等等,例如babel- transpiler(devDependency),babel-polyfill提供缺失的功能(API不是语法)到应用程序(依赖).