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

在上一篇中，我们介绍了集成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与模块加载和打包工具，到此结束。

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。