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

发布时间:2016/11/30 00:11 发布者:alice

返回博客中心

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

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

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

/download/?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中文官网:/developer/wijmojs

Wijmo5在线示例:/developer/wijmojscore

Wijmo5产品文档:/developer/wijmojscore

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


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网