webpack 是如何使用 polyfill 的？

Question

我将 webpack 与 babel polyphill 结合使用，因此我可以在 es6 中编写代码。

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

例如，假设我们有一个简单的 class

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 添加到我的依赖项中（而不是在我的开发依赖项中）？

感谢

Answer 1

is webpack compiling my code so that resulted code is only the es5?

是的。 Webpack 将 babel-polyfill 代码包含到您的结果包 中。

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

If it doesn't occur on run time so why do I have to include polyphill to my dependencies (instead of in my dev dependencies)?

因为 babel-polyfill 是您的应用程序正常工作所必需的模块 运行-时间。 dependencies 是运行应用所必需的，devDependencies 仅用于开发、转译、测试等。例如 babel - 转译器（devDependency），babel-polyfill 提供缺失应用程序（依赖项）的功能（api 不是语法）。

webpack 是如何使用 polyfill 的？

How does webpack uses polyfill?

javascript

ecmascript-6

webpack

babeljs

es6-module-loader