国家  china

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

在上一篇中,我们介绍了集成Wijmo与模块加载和打包工具(一),本文我们就接着这个内容做介绍。

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

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

WebPack

适用于WebPack的Angular2的CellTemplateIntro示例,如下:

http://publicfiles.componentone.com/Wijmo%205%20Files/Angular2/CellTemplateIntro_Ng2_WP.zip

唯一的Wijmo特定设置如下:

import '../styles/vendor/wijmo.min.css';

在src/vendor.ts文件中的语句包含wijmo.css可用于一个包。

你需要执行如下的步骤创建和运行。

第一步:Unzip

它有两个根文件夹:CellTemplateIntro,包含示例本身。Wijmo_zip_Image,模拟Wijmo的下载zip图像,但是仅仅包含演示必要的东西(命名为wijmo-amd npm 图像)。

请注意示例不包含Wijmo库文件-.js或是.d.ts。唯一例外的是在 styles\vendor 文件夹中的wijmo.min.css。因为.css总是需要一个特定的处理,这不是Wijmo特定的问题。

 

第二步:运行NodeJS命令提示符

第三步:CD到CellTemplateIntro\CellTemplateIntro 文件夹。

第四步:运行”npm InStall”

安装所有必要的库到node_modules,从上述wijmo_zip_image \ npmimages \ wijmo文件夹检索。包含wijmo文件夹。

文件夹包含所有的wijmo库模块,Ng2 interop和核心(wijmo.angular2.grid和wijmo.grid)。每一个模块包含.min.js和.d.ts文件。

第五步:运行”npm run build”

这步运行WebPack,会在dist文件夹创建一个应用程序包。

第六步:在浏览器打开wpbundle.html页面

文件导入上一步创建的包,然后托管在一些Web服务器上。如果你使用VisualStudio, 最简单的运行方式就是打开示例解决方案,设置wpbundle.html作为默认页面,然后运行项目。

Angular CLI

一些有关Angular CLI的点:Wijmo可以以简单的方式通过上述描述的方法整合到WebPack。但是这里有一些问题,Wijmo-minified 文件有一个min.js扩展,然而模块名称没有自动的包含”min”在名字里。

在所有的加载/打包工具中,这个问题-映射模块名称的文件的”min.js扩展-可以通过繁琐的设置方式解决。但是我们没有找到任何方法来实现Angular CLI这一块。

同时,我们想(仅仅是想法),缩减”min”后缀文件名是一种正确的方式。因此,我们猜测这事一个短暂的限制,将来会在Angular CLI中被解决。暂时,你需要在安装项目前,重命名”.min.js”成”.js”。

真正的NPM Registry

现在,我们并没有提供可能使用wijmo npm registry 去执行”npm install”,主要因为我们有如下的问题.

我们有两种类型的Wijmo版本:

试用版(屏幕弹出Wijmo版本信息和没有源码)

授权版(不弹出信息和有源码)

每一个都有两种不同的npm registry 名字,但是都必须安装在相同的node_modules/wijmo文件夹下。否则,模块的名字比如”wijmo/wijmo.grid”,当你切换到另一个版本的时候,使用的版本将被破坏,对于这个问题,我们没有直接的解决办法。

有关集成Wijmo与模块加载和打包工具,到此结束。

 

更多资源:

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_Module2.aspx

不允许评论