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

Thx

Answer 1

webpack是否正在编译我的代码，以便生成的代码只是es5？

是的。 Webpack将babel-polyfill代码添加到结果包中。

因此，如果您使用本机Promise，则babel-polyfill会将自己的实现设置为全局名称空间（window.Promise）。还有一个babel-runtime程序包，它不涉及全局名称空间，并在Webpack捆绑期间将您的Promise代码作为本地模块解析。

如果它不是在运行时发生的，那为什么我必须在我的依赖项中包含polyphill（而不是在我的开发依赖项中）？

因为babel-polyfill是您的应用正常运行所需的模块 在运行时。 dependencies是运行应用程序所必需的，devDependencies仅用于开发，编译，测试等。因此示例babel-transpiler（devDependency），babel-polyfill提供了缺少的功能（api没有语法）到应用（依赖项）。

webpack如何使用polyfill？

1 个答案: