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

发布时间:2016/12/01 00:12 发布者:alice

返回博客中心

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

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

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

Wijmo5在线示例:/developer/wijmojscore

Wijmo5产品文档:/developer/wijmojscore

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


关于葡萄城

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

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