Angular 使用已發(fā)布的庫

安裝庫

這些庫都是作為 npm 包發(fā)布的，它們通常都帶有一些與 Angular CLI 集成好的原理圖。要把可復(fù)用的庫代碼集成到應(yīng)用中，你需要安裝該軟件包并在使用時導(dǎo)入它提供的功能。對于大多數(shù)已發(fā)布的 Angular 庫，你可以使用 Angular CLI 的 ?ng add <lib_name>? 命令。

Angular CLI 的 ?ng add? 命令使用包管理器來安裝庫包，并調(diào)用該包中的原理圖在項目代碼中的添加腳手架。這些包管理器包括 npm 或 yarn。項目代碼中的額外腳手架包括 import 語句、fonts 和 themes。

已發(fā)布的庫通常會提供一個 ?README ?文件或其它文檔來介紹如何把該庫添加到你的應(yīng)用中。例子可參閱 Angular Material 文檔。

庫的類型信息

通常，庫包中會在 ?.d.ts? 文件中包含類型信息。參閱 ?node_modules/@angular/material? 中的例子。如果庫包中沒有包含類型信息并且你的 IDE 報錯，你可能需要安裝與該庫關(guān)聯(lián)的 ?@types/<lib_name>? 包。

比如，假設(shè)你有一個名為 ?d3 ?的庫：

npm install d3 --save
npm install @types/d3 --save-dev

已安裝到工作區(qū)中的 ?@types/? 包中所定義的類型，會自動添加到使用該庫的項目的 TypeScript 配置文件中。TypeScript 默認就會在 ?node_modules/@types? 文件夾中查找類型，所以你不必單獨添加每一個類型包。

如果某個庫沒有 ?@types/? 類型信息，你仍然可以手動為它添加一些類型信息。為此你要：

1. 在 ?src/? 文件夾中創(chuàng)建一個 ?typings.d.ts? 文件。該文件會自動包含在全局類型定義中。
2. 在 ?src/typings.d.ts? 中添加如下代碼。

declare module 'host' {
  export interface Host {
    protocol?: string;
    hostname?: string;
    pathname?: string;
  }
  export function parse(url: string, queryString?: string): Host;
}

3. 在使用該庫的組件或文件中，添加如下代碼。

import * as host from 'host';
const parsedUrl = host.parse('https://angular.io');
console.log(parsedUrl.hostname);

按需定義更多類型。

更新這些庫

庫的發(fā)布者可以對這些庫進行更新，而這些庫也有自己的依賴，所有依賴都需要保持最新。要檢查已安裝庫的更新，請使用 ?ng update? 命令。

使用 ?ng update <lib_name>? 命令來單獨更新某個庫的版本。Angular CLI 會檢查庫中最新發(fā)布的版本，如果最新版本比你已安裝的版本新，就會下載它并更新你的 ?package.json? 以匹配最新版本。

如果要把 Angular 更新到新版本，你需要確保所用的庫都是最新的。如果庫之間相互依賴，你可能還要按特定的順序更新它們。請參閱 Angular 升級指南以獲取幫助。

把某個庫添加到運行時的全局范圍中

如果未將老式 JavaScript 庫導(dǎo)入應(yīng)用程序，你可以將其添加到運行時全局范圍并加載它，就像將其添加到 script 標記中一樣。使用工作區(qū)構(gòu)建配置文件 ?angular.json? 中此構(gòu)建目標的 ?scripts ?和 ?styles ?選項，配置 Angular CLI 以便在構(gòu)建時執(zhí)行此操作。

比如，要使用 Bootstrap 4 庫

1. 使用 npm 包管理器安裝庫和相關(guān)的依賴項：

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

2. 在 ?angular.json? 配置文件中，把關(guān)聯(lián)的腳本文件添加到 "scripts" 數(shù)組中：

"scripts": [
  "node_modules/jquery/dist/jquery.slim.js",
  "node_modules/popper.js/dist/umd/popper.js",
  "node_modules/bootstrap/dist/js/bootstrap.js"
],

3. 把 ?bootstrap.css? 文件添加到 "styles" 數(shù)組中：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.css"
],

4. 運行或重啟 ?ng serve?，看看你的應(yīng)用是否正在使用 Bootstrap 4。

在你的應(yīng)用中使用運行時全局庫

通過 “scripts” 數(shù)組導(dǎo)入某個庫之后，不要在 TypeScript 代碼中再次使用 import 語句導(dǎo)入它。以下代碼片段是一個示例導(dǎo)入語句。

import * as $ from 'jquery';

如果你使用 import 語句導(dǎo)入它，你將擁有該庫的兩個不同副本：一個作為全局庫導(dǎo)入，另一個作為模塊導(dǎo)入。這對于帶有插件的庫來說尤其糟糕，比如 JQuery，因為每個副本都包含不同的插件。

相反，運行 ?npm install @types/jquery? Angular CLI 命令為你的庫下載類型信息，然后按照庫的安裝步驟進行操作。這樣你就可以訪問該庫公開的全局變量了。

定義運行時全局庫的類型信息

如果你要用的全局庫沒有全局類型信息，就可以在 ?src/typings.d.ts? 中手動聲明它們。

比如：

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'