javascript - webpack 是如何使用 polyfill 的？

Question

我将 webpack 与 babel polyphill 结合使用，因此我可以在 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 添加到我的依赖项中(而不是在我的开发依赖项中)？

谢谢

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 - transpiler (devDependency)，babel-polyfill 为应用程序(依赖项)提供缺少的功能(api 而非语法)。