使用 WijmoJS,NPM,Webpack 和 JavaScript 框架构建 Web 应用程序

发布时间:2018/04/19 14:04 发布者:JeffryLi

返回博客中心

概述

在 2018 年 v1 版本,WijmoJS 可在 NPM 上使用。 此博客是关于如何使用 WijmoJS 和 NPM 为 Angular,Ionic,React 和 Vue.js 构建应用程序的系列文章中的第一篇。

为什么开发人员使用 NPM,Webpack 和框架?

直到最近,大多数 JavaScript 开发人员会使用脚本标记将组件添加到其应用程序中,以加载一些 JavaScript 文件,然后在其他脚本块中引用这些组件:

<!-- load dependencies -->
<link href="http://cdn.wijmo.com/5.latest/styles/wijmo.css" rel="stylesheet"/>>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.js"></script>
<!-- use them in your code -->
<script>
    var theGrid = new wijmo.grid.FlexGrid('#myGrid', {
        itemsSource: getMyData();
    });
</script>

这种方法很简单,适用于小型简单应用。 但随着应用程序和框架复杂性的增加,跟踪依赖和版本变得更加困难和容易出错。

即使你已经计算出所有必须加载的文件,并且按照什么顺序,通过 Web 加载大量小文件效率不高,因此应用程序加载时间可能会成为问题。

为了解决这些问题,已经出现了新的工具来使开发人员更容易和更高效。 当今最流行的两种工具是:

NPM:Node Package Manager 是世界上最大的软件注册表,包含超过 600,000 个包(代码块),您可以轻松添加到您的应用程序中。 NPM 可以轻松跟踪这些软件包的依赖和版本。

Webpack:Webpack 是 JavaScript 应用程序的模块打包程序。 它通过 webpack 处理应用程序,构建包含应用程序需要的每个模块的依赖关系图,然后将这些模块打包到一个或多个捆绑包中进行高效部署。

在本系列中,我们将展示如何将 WijmoJS 与 NPM 和 Webpack 一起使用来创建针对最流行的 JavaScript 应用程序框架的应用程序:

Angular:作为 Google 构建 Web,移动或桌面上的 JavaScript 应用程序的框架,此功能框架结合了声明性模板,依赖注入以及端到端工具。阅读更多关于 WijmoJS 的 Angular 支持。

Ionic:构建移动应用程序最流行的框架之一,Ionic 专注于应用程序的外观和用户界面交互。 它基于 Angular,并使用 Cordova 提供对特定设备的本地功能的访问,包括传感器,数据,网络状态等。

React:Facebook 的框架自称为“一个用于构建用户界面的 JavaScript 库”。它使用类似 TML 的语法扩展 JavaScript,以创建组合到应用程序中的组件。详细了解 WijmoJS 的 React 支持。

Vue:Vue 是一个可以在一个库和一个全功能框架之间扩展的生态系统,Vue 是这个列表中最小且最不固定的框架。 它允许您编写结合 HTML,JS 和 CSS 的传统 HTML 和 JavaScript 或“vue”文件,以创建封装的可重用组件。详细了解 WijmoJS 的 Vue 支持。

我们不会详细介绍 NPM,Webpack 或上面列出的任何框架。所有这些工具都非常受欢迎,并且有完整的文档记录,您可以阅读我们关于框架的电子书,以获得良好的概述。

相反,我们将重点关注将 WijmoJS 添加到每个框架中编写的简单应用程序的任务。本系列的下四篇博客描述了如何在每个框架中使用 WijmoJS 创建一个简单的应用程序。您可能需要仔细阅读所有内容以了解它们之间的差异和共同点。如果您只对特定框架感兴趣,我们将在接下来的几周内发布一系列涵盖每个框架的简短系列。

  • 所有框架中创建和维护应用程序的基本步骤都是相同的。
  • 使用 CLI 创建应用程序。
  • 使用 NPM 将 WijmoJS 添加到应用程序。
  • 导入您要使用的组件并添加适当的标记。

从哪里获取 WijmoJS 最新版本?

NPM,Webpack 和 JavaScript 框架支持是纯前端控件集 WijmoJS 2018 V1 版本的全新特性,下载试用最新版 WijmoJS 纯前端控件集,即可开始使用。

想要查看 WijmoJS 控件集 2018 V1 版本的其他新特性,请点击此处



如果你的项目需要一款专注于企业应用的 .NET 全功能控件套包,支持 WinForm、WPF、UWP、ASP.NET MVC 等多个平台,帮助您在缩减成本的同时,提前交付丰富的桌面、Web 和移动企业应用,ComponentOne Enterprise 恰恰能满足您的一切需求点击这里,开启您的炫酷之旅!

如果你有疑问,可以到 GCDN (葡萄城技术社区)获得技术支持:

WijmoJS 专区

GCDNhttp://gcdn.grapecity.com.cn/

官方网站葡萄城官网


关于葡萄城

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

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