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