[英]How does webpack uses polyfill?
I'm using webpack with babel polyphill so I can write my code in es6. 我将Webpack与babel polyphill结合使用,因此可以在es6中编写代码。
I don't understand how does webpack use polyfill so my code can be supported in browsers like IE? 我不明白webpack如何使用polyfill,以便我的代码可以在IE之类的浏览器中得到支持?
For example, let say we have a simple class 例如,假设我们有一个简单的类
class Polygon {
constructor(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}
}
Since IE doesn't understand what the class keyword is, my code need to be change to: 由于IE无法理解class关键字是什么,因此我的代码需要更改为:
function Polygon(height, width) {
this.name = 'Polygon';
this.height = height;
this.width = width;
}
Is that changes occur on run time (using something like a reference to the code that should be interpreted) or is webpack compiling my code so that resulted code is only the es5? 是在运行时发生更改(使用对应解释的代码的引用),还是webpack编译了我的代码,使得生成的代码只是es5?
I mean, if that occur on run time, I will have more code in my bundle: the code I wrote + polyphill... 我的意思是,如果这是在运行时发生的,我的软件包中将包含更多代码:我编写的代码+ polyphill ...
Indeed, when using webpack, my code is (a lot) bigger. 确实,当使用webpack时,我的代码更大了。
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)? 如果它不是在运行时发生的,那么为什么我必须在我的依赖项中包含polyphill(而不是在我的开发依赖项中)?
Thx 谢谢
is webpack compiling my code so that resulted code is only the es5?
是webpack编译我的代码,以便生成的代码只是es5吗?
Yes. 是。 Webpack includes
babel-polyfill
code to your result bundle . Webpack在结果包中包含
babel-polyfill
polyfill代码 。
So if you use native Promise
, babel-polyfill
will set own implementation to global namespace(window.Promise). 因此,如果您使用本机
Promise
,则babel-polyfill
会将自己的实现设置为全局名称空间(window.Promise)。 There is also babel-runtime
package which does not touch global namespace and resolves your Promise
in code as local module during webpack bundling. 还有一个
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)?
如果它不是在运行时发生的,那么为什么我必须在我的依赖项中包含polyphill(而不是在我的开发依赖项中)?
Because babel-polyfill
is required module for your application to work correctly on run-time . 因为
babel-polyfill
是您的应用程序 在运行时 正确 运行所必需的模块。 dependencies
are required to run app, devDependencies
only for development, transpilation, testing, etc. So example babel
- transpiler (devDependency), babel-polyfill
provides missing functionality(api not syntax) to app (dependency). dependencies
是运行应用程序所必需的, devDependencies
仅用于开发,编译,测试等。因此,示例babel
-transpiler(devDependency), babel-polyfill
polyfill为应用程序(依赖关系)提供了缺少的功能(api并非语法)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.