使用第三方库

虽然Ionic已经内置了很多特性，但是有些功能对核心框架来说是不必要的。这种情况下，App可以依靠NPM上的丰富生态。NPM命令行工具可以非常容易的管理附加的package。

如果要了解NPM的更多信息，可以在继续下面的内容之前先阅读NPM的文档。

要给App添加附加的库，可以使用以下命令：

npm install <theLibraryName> --save

比如安装Lodash：

npm install lodash --save

install命令将从NPM下载库的副本，将其保存在当前App的node_modules目录下。--save参数意思是告诉NPM命令行把这个库添加到App的package.json中的依赖列表中。

如果只是JavaScript的话，以上的命令对于安装第三方库来说已经足够了。但是Ionic使用了TypeScript，所以还需要一点其他的工作。

因为TypeScript使用了静态类型，所以我们需要描述将要使用并引入的功能。TypeScript通过类型定义来描述这些功能。实际上TypeScript团队已经包含了很多这样的类型定义，也可以通过NPM进行安装。

与安装库的方法类型，可以运行下的命令：

npm install @types/theLibraryName --save

对于刚才的Lodash来说，可以运行这个命令：

npm install @types/lodash --save

如果你要用的库在官方的types里不存在，有两个办法。简单的办法是创建一个简短的类型定义。更复杂的方法是创建一个完整的类型定义。

在App的src/目录下，创建一个名为declarations.d.ts的文件。.d.ts后缀名表示这个文件只是一个定义文件，不是真正的代码。

打开这个文件，添加一行代码来declare（声明）我们的模块：

declare module 'theLibraryName';

回到我们刚才Lodash的例子，可以这样写：

declare module 'lodash';

可以在这个文件里声明其他的定义，如果你使用的库在官方的Types里都没有，可以很简单的放到declarations.d.ts这个文件里。

declare module 'theLibraryName'; 
declare module 'anotherLibraryName'; 
declare module 'someOtherLibraryName';

安装库和它的类型定义后，可以通过引入库来使用它。

引入声明遵循下的方式：

import { myFunction } from 'theLibraryName';

首先我们引入之前导出的功能的名字。这种方式叫做named exports。这是只引入我们需要的功能的最佳方式——在上面这个例子中是myFunction。我们之前已经这样做过了，比如我们从Angular中引入Component，在Ionic中引入NavController：

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular';

还有一些情况，很难引入一个库特定的部分。比如为Node环境开发的很老的一些库，遵循比较老的CommonJS module方式。

这种情况下，这个库在export（导出）的时候必须使用default关键字。

import myLib from 'theLibraryName';

default导出使用CommonJS方式的module.exports属性，这意味着myLib可以访问所有的属性，函数或其他任何暴露出来的部分。

为了调用上面例子中的myFunction，代码看起来可能是这样的：

import myLib from 'theLibraryName'; 
myLib.myFunction();

这是一个调用Lodash中的capitalize方法的例子：

import lodash from 'lodash'; 
lodash.capitalize('myStringToCapitalize');

最佳实践是尽量使用named export方式来引入，只有当build有错误的时候才改用default export方式。

对于大多数库来说，都是开箱即用的。很少情况下build过程需要改一些参数。Ionic的build过程可以很简单的进行扩展，参考custom configs文档。

results matching ""