集成Wijmo与模块加载和打包工具（一）

我们近期收到接二连三的有关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-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