全局脚本
有的时候,我们需要加载全局脚本,例如 jQuery 脚本库,第三方的控件库等等。比如 jQuery 可以直接加载到 window 对象上,这就需要我们使用 Angular 中的全局脚本来处理。
使用全局脚本
通过在 angular-cli.json 配置文件的 apps[0].scripts 属性中添加脚本文件可以应用于全局范围。这相当于您在 index.html 中添加 <script> 标记来精确加载它们。
这对于遗留的库或者脚本片段来说特别有用。
"scripts": [
"global-script.js",
],
重命名和延迟加载
可以使用对象格式实现重命名和延迟加载。
"scripts": [
"global-script.js",
{ "input": "lazy-script.js", "lazy": true },
{ "input": "pre-rename-script.js", "output": "renamed-script" },
],
在应用中使用全局库
一旦您通过scripts 导入一个库,您不需要在 TypeScript 代码中通过 import 再次导入它(例如 import * as $ from 'jquery';)。如果这样做了,您会得到两个不同的库:一个全局导入,一个作为模块导入。
这对于使用插件的库来说,尤其是个坏消息,比如 jQuery,因为每个复制品都有不同的插件。
相反,在项目中下载全局库的相应类型定义(npm install @types/jquery),遵循安装第三方库的步骤,您将可以访问库所导出的全局变量。
如果您使用的第三方库还没有类型定义,可以在 src/typings.d.ts 中手工定义为 any。
declare var libraryName: any;
在使用扩展其它库的脚本库时,例如 jQuery 的插件实例(例如 $('.test').myPlugin(); ) ,因为安装的类型 @types/jquery 可能没有包含 myPlugin 的定义,您可能需要在 src/typings.d.ts 中添加一个类似如下的接口。
interface JQuery {
myPlugin(options?: any): any;
}
否则,在您的 IDE 中,您可能会看到类似 [TS][Error] Property 'myPlugin' does not exist on type 'JQuery' 错误。
See also
https://github.com/angular/angular-cli/wiki/stories-global-scripts