webpack如何使用polyfill?

时间:2018-07-19 04:56:42

标签: javascript webpack ecmascript-6 babeljs es6-module-loader

我将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

1 个答案:

答案 0 :(得分:5)

  

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没有语法)到应用(依赖项)。