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