我们近期收到接二连三的有关Wijmo集成模块加载和打包工具(比如SystemJS, WebPack, Angular CLI等),这些是可行的,但需要一些额外的步骤。我们也收到一些有关Wijmo npm的安装问题,与前者有密切的耦合关系。
我们要和大家分享为了消除这种复杂性所做的努力的结果。
首先你需要下载Wijmo的Demo,官网下载链接:
外部模块
设置Wijmo到上述工具的主要问题集中于核心库(non-Ng2)模块不是外部的。相反,它们是”global”模块,可通过global “wijmo”变量访问。为了加载和手机所有必要模块,加载/打包工具通过如下的TS/ES6引入语句链,仅仅在真正的(“外部”)模块工作顺利,而且全局模块需要特定的步骤。
正因为如此,我们创造了真正(外部)的wijmo核心库模块,采用ES6/TS引用声明。比如,使用在Wijmo global模块中的如下代码:
@ViewChild('flex1') flex1: wijmo.grid.FlexGrid; let gr = new wijmo.grid.GroupRow();
外部模块代码如下:
import * as wjcGrid from 'wijmo/wijmo.grid'; @ViewChild('flex1') flex1: wjcGrid.FlexGrid; let gr = new wjcGrid.GroupRow();
真正的模块,可以被放置在node_modules/wijmo文件夹下,然后被各种加载/打包工具用一种自然的方式使用,以最小的调音,或不调整。
Npm图像
Wijmo下载zip包里包含NpmImages文件夹,里面有wijmo-amd, wijmo-commonjs 和wijmo-system子文件夹,包含不同模块格式的Wijmo外部模块(AMD, CommonJS 和System)
重要点:每个子文件夹实际上有一个npm图像,能够通过如下命令安装:
npm install <some_path>/NpmImages/wijmo-amd
上述命令在从命令所在目录的node_modules/wijmo文件夹下安装Wijmo AMD模式。
使用例子
所有的Wijmo Angular2示例重新使用新的功能模块,并在package.json文件里有如下记录:
"dependencies": { "wijmo": "../../../../../NpmImages/wijmo-amd", … another modules (Ng2 etc) }
因此,在项目文件夹中它仅仅足够运行“npm install”安装Ng2和Wijmo库。唯一的手动添加到项目中的Wijmo文件是wijmo.css,这是合理的。唯一缺点:如果你把示例移动到其他路径,你需要更新在package.json中的Wijmo mpm图像的路径。
另外,我们计划在我们的网站发布使用npm图像的.tgz文件,并使用远程定位在示例中使用他们。
通过这种方法,项目可以自由移动到其他位置而不用破坏Wijmo npm图像的引用。现在这个只在评估版本中可用,我们正在考虑是否可以将这种方法应用到授权版本中。
更多资源:
Wijmo中文官网:/developer/wijmojs
Wijmo5在线示例:/developer/wijmojscore
Wijmo5产品文档:/developer/wijmojscore
如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html