Angular CLI: 全局脚本

全局脚本

有的时候，我们需要加载全局脚本，例如 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