国家  china

集成Wijmo与模块加载和打包工具(一)

我们近期收到接二连三的有关Wijmo集成模块加载和打包工具(比如SystemJS, WebPack, Angular CLI等),这些是可行的,但需要一些额外的步骤。我们也收到一些有关Wijmo npm的安装问题,与前者有密切的耦合关系。

我们要和大家分享为了消除这种复杂性所做的努力的结果。

首先你需要下载Wijmo的Demo,官网下载链接:

http://www.gcpowertools.com.cn/products/download.aspx?pid=54

外部模块

设置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-commonjswijmo-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中文官网:http://wijmo.gcpowertools.com.cn/

Wijmo5在线示例:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo5产品文档:http://wijmo.gcpowertools.com.cn/5/docs/

如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.gcpowertools.com.cn/showforum-140.html

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/Wijmo_Module1.aspx

不允许评论