在上一篇中,我们介绍了集成Wijmo与模块加载和打包工具(一),本文我们就接着这个内容做介绍。
首先你需要下载Wijmo的Demo,官网下载链接:
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中文官网:/developer/wijmojs
Wijmo5在线示例:/developer/wijmojscore
Wijmo5产品文档:/developer/wijmojscore
如果依然有问题,可以到我们的官方产品论坛发帖咨询:http://gcdn.grapecity.com.cn/showforum-140.html