angular - Polyfills(腻子脚本)

韦俊英
2023-12-01

说明:

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 中找不到要使用的腻子脚本,就可以仿照下列模式自行添加它:

 类似资料: