angular - Polyfills（腻子脚本）

发布时间：2019-03-04 11:22:26 修改时间：2019-03-04 11:28:39 阅读：6611 评论：2 0

说明：

Polyfills（腻子脚本）主要支持低版本浏览器的兼容。

对于腻子脚本Polyfills对补充Internet Explorer的不足和缺失尤其有用,主要针对IE7/8的兼容。





下面常用的腻子脚本示例：

html5shiv.js：让IE8 及更低版本的IE 识别section、 article、nav等HTML5元素。 

selectivizr：让IE（6/7/8）支持::first-child等高级 CSS选择符。 

CSS3Pie：让IE6到IE9支持圆角、背景渐变、边框图片、盒 阴影、RGBa颜色等可视化的CSS3功能。 

Respond.js：让旧版本浏览器支持媒体查询。 

-prefix-free ：为需要厂商前缀的CSS3声明添加前缀。 

borderBoxModel.js：让IE6和 IE7支持CSS3的box-sizing属性。 




腻子脚本的应用：

Angular CLI 的用户可以通过自动创建的 src/polyfills.ts 文件来启用这些腻子脚本。

这个文件把强制的和很多可选的腻子脚本组织成 JavaScript 的 import 语句。

强制性 腻子脚本（如 zone.js）的 npm 包在创建项目时就已经自动安装了，相应的 import 语句也都加好了。你一般不用动它们。

• 但是如果要用一个可选的腻子脚本，就要通过 npm 或 yarn 来安装它们的 npm 包了。 比如，如果你需要 web 动画的腻子脚本，就要通过下列命令之一来安装它：

# note that the web-animations-js polyfill is only here as an example

# it isn't a strict requirement of Angular anymore (more below)

npm install --save web-animations-js

• 然后打开 polyfills.ts 文件，并反注释对应的 import 语句，就像这样：

src/polyfills.ts

/**

* Required to support Web Animations `@angular/platform-browser/animations`.

* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation

**/

import 'web-animations-js';  // Run `npm install --save web-animations-js`.




如果在 polyfills.ts 中找不到要使用的腻子脚本，就可以仿照下列模式自行添加它：

1. 安装 npm 包

2. 在 polyfills.ts 中 import 这个文件

---