使用第三方库

http://ionicframework.com/docs/v2/resources/third-party-libs/

虽然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过程需要改一些参数。Ionicbuild过程可以很简单的进行扩展,参考custom configs文档。

results matching ""

    No results matching ""