CN103955361A

CN103955361A - 一种web前端代码自动化编译构建的模块化开发和发布系统

Info

Publication number: CN103955361A
Application number: CN201410122342.0A
Authority: CN
Inventors: 李定坤; 马海东
Original assignee: Century Light Technology Development (beijing) Co Ltd
Current assignee: Century Light Technology Development (beijing) Co Ltd
Priority date: 2014-03-28
Filing date: 2014-03-28
Publication date: 2014-07-30

Abstract

本发明提供一种web前端代码自动化编译构建的模块化开发和发布系统，所述系统包括web前端代码编译器模块，持续构建和发布管理模块和版本管理中心。本发明提供的系统用于解决js语言css语言本身不够灵活的现状，使得web前端开发人员能像后台开发人员使用其它高级语言一样，灵活使用js、css语言进行模块化开发编译集成。及对Web前端代码可进行持续化自动化构建发布管理，提高web前端开发人员的工作效率及团队间的协同工作能力。同时，还解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。

Description

一种web前端代码自动化编译构建的模块化开发和发布系统

技术领域

本发明涉及前端开发环境搭建的技术领域，更具体地，涉及一种web前端代码自动化编译构建的模块化开发和发布系统。

背景技术

在网站开发和运行过程中，需要搭建Web前端开发环境对网站的项目开发，对存在问题的内容进行修改和调试。现有技术中，Web前端开发环境常常需要用到CDN内容分发网络服务器，具体而言，正常访问网页时会附带访问很多资源文件，比如css，js文件等。CDN内容分发网络服务器就是存放这些css和js的文件。

当今Js脚本语言和css语言，是互联网时代不可缺少的两门语言。Web前端开发团队是开发web应用不可缺少的重要团队，在复杂的互联网应用环境中，如何提高js、css语言本身的使用灵活性，及如何构建一套属于Web前端团队的可持续化构建和发布管理平台、测试平台。

关于如何搭建Web前端可持续构建和发布的方案和技术，目前比较有代表的是基于Jenkins搭建Web前端开发的持续化构建环境，能够自动化持续构建web前端项目代码，及发布到远程相应的环境。但现实中一个这样工具完全不能满足Web前端开发团队的需求，具体的不足如下：

首先，多人如何协同开发代码？例如a写com.js，b写m1.js 里面import了com.js模块，c写p.js里面import了com.js及m1.js 。

其次，如何减少页面中对js、css内容的请求次数。比如现在一个页面引用了1.css,2.css及1.js,2.js.浏览器需要向服务端发起4次请求，如何将4次请求变成两次请求。

最后，没有相关的单元测试配套环境。基于Js css代码模块化开发及自动化编译发布系统）开发出来的产品能很好的解决以上问题。

目前解决上述不足之处的现有技术的缺点如下：

首先，Jenkins是基于java语言实现的持续化构建平台，适合大部分后台团队，但不适合Web前端开发团队。Jenkins持续构建不能按需构建包含正确内容的版本：编译构建过程中开发人员不能按需替换代码中的内容。比如同一分css代码中的图片地址域名在不同生产环境内容可能不一样，使用jenkins不能灵活按需编译构建需要的版本。

其次，不能对模块化的js、css代码进行编译构建，不能解决代码文件中的相互引用造成代码冗余。

当web前端开发人员/团队在复杂的环境下进行项目开发、发布时，没有一个完整易用的项目代码管理和发布版本及环境维护管理平台工具。这个工具需要从源代码、到编译、到单元测试、到构建线上版本管理、到发版行为记录管理中的每个步骤进行追踪查询。

发明内容

本发明提供的web前端代码自动化编译构建的模块化开发和发布系统用于解决js语言css语言本身不够灵活的现状，使得web前端开发人员能像后台开发人员使用其它高级语言一样，灵活使用js、css语言进行模块化开发编译集成。及对Web前端代码可进行持续化自动化构建发布管理，提高web前端开发人员的工作效率及团队间的协同工作能力。同时，还解决传统的一个页面需要引用多个js/css资源文件，降低浏览器对资源的请求次数，减轻服务压力。

本发明提供一种web前端代码自动化编译构建的模块化开发和发布系统，所述系统包括web前端代码编译器模块，持续构建和发布管理模块和版本管理中心，其中，所述web前端代码编译器模块扩展js 语言和css语言的关键字，使得所述js语言和所述css语言具备高级语言的特征。

在上述任一方案中优选的是，所述高级语言的特征为代码组织编写和/或代码组织编译。

在上述任一方案中优选的是，所述扩展js 语言和css语言的关键字为import关键字。

在上述任一方案中优选的是，所述web前端代码编译器模块通过所述扩展所述js语言和所述css语言的关键字，还能够使得所述js语言和所述css语言具备配置文件访问的能力。

在上述任一方案中优选的是，所述持续构建和发布管理模块通过脚本实现自动化持续构建。

在上述任一方案中优选的是，所述持续构建和发布管理模块调用编译器产生编译构建后的正确代码。

在上述任一方案中优选的是，所述持续构建和发布管理模块自动提交到所述版本管理中心。

在上述任一方案中优选的是，所述版本管理中心进行版本管理和发布管理。

附图说明

为了使本发明便于理解，现在结合附图描述本发明的具体实施例。

图1示出了本发明一优选实施例的工作流程图。

具体实施方式

下面结合附图和优选的实施方式对本发明作进一步详细描述。权利要求中构成要件和实施例中具体实例之间的对应关系可以如下例证。这里的描述意图在于确认在实施例中描述了用来支持在权利要求中陈述的主题的具体实例，由于在实施例中描述了实例，不意味着该具体实例不表示构成要件。相反地，即使在此包含了具体实例作为对应一个构成要件的要素特征，也不意味着该具体实例不表示任何其它构成要件。

此外，这里的描述不意味着对应于实施例中陈述的具体实例的所有主题都在权利要求中引用了。换句话说，这里的描述不否认这种实体，即对应实施例包含的具体实例，但不包含在其任何一项权利要求中，即，能够在以后的修正被分案并申请、或增加的可能发明的实体。

应当注意的是，“系统”在此意味着由两个或更多设备构成的处理。

显而易见地，用户终端可以由个人计算机构成。此外，所述用户终端还可以由例如蜂窝电话、任何其它PDA（个人数字助理）工具、AV（音频视频）装置、诸如家用电气（家庭用电气化）设备的CE（消费电子设备）等构成。

“网络”意味着至少连接了两个设备的机构，并且在其中，一条信息能够从一个设备发送到另一个设备。经由网络建立通信的设备可以是彼此分离的，也可以是构成一个机器的内部模块。

“通信”可表示无线通信和有线通信。然而，还可以是混合无线和有线通信的通信，更具体地，在某个区段采取无线通信而在另一个区段采取有线通信的通信。同样，它也可以是这样的通信：从一个设备向另一设备的通信是有线的，且相反方向的通信是无线的。

本发明所述的系统包括web前端代码编译器模块和持续构建和发布管理模块。

其中，所述web前端代码编译器模块包括：首先，通过扩展js 语言,css语言关键字，使得js、css语言具备其它高级语言的特性，比如java,C++ 等,可以通过类似以import 关键字对其它模块中的代码进行引用。从而达到可以像其它高级语言一样进行代码组织编写、编译。

例如：传统一个页面(A.html)里面引用了四个js文件 jquery.js、c1.js、c2.js、c3.js，其中这些单独的js是由团队内部同的人写的且c1 c2 c3都需要依赖jquery.js。c2.js c3.js里面又包含了c1.js里面的大部分逻辑，c3.js里面又包含了c2.js逻辑。通过通过扩展js 语言类似“import”关键字，可最终实现a.html里面只引用一个js文件a.js。

其中a.js里面的内容为: $IMPORT('jquery.js '); $IMPORT('c1.js'); $IMPORT('c2.js'); $IMPORT('c3.js')。

同样地，c1 c2 c3 js也可以通过$IMPORT对其它模块进行引用 c2引用c1,c3引用c1、c2，这样每个模块相互引用，减少了冗余代码。且A.html里面再也不需要引用多个js文件只需要应用一个a.js,大大降低了浏览器对js或css的请求次数。

Css 同样也是通过类似关键字”import”，引用不同模块的代码。

其次，所述web前端代码编译器模块通过扩展js/css语言关键字，使得js/css具备配置文件访问的能力。因为，各种环境下代码中需要的资源数据不一样，可以通过配置管理这些可能会动态改变的数据比如背景图片的地址。

例如：传统的css里面引用一个背景图片的写法如下：

background:url(http://www.test/image/dop/open/t.png)。在这段代码里url后面的http://www.test/image/dop/open/t.png可能在不同的环境需要的内容不一样。这个时候可通过扩展关键词类似”conf”指定里面的内容是属于哪个配置文件下的哪个配置项，因此，这段代码可修改成如下：background:url($conf.css.cssproperties.backgound)。

同时在项目根目录下创建一个conf/css/ cssproperties.properties文件，并且文件里面加上backgound=http://www.test/image/dop/open/t.png

所述持续构建和发布管理模块通过脚本实现自动化持续构建，主要是调用编译器产生编译构建后的正确代码，并自动提交到版本管理中心进行版本管理和发布管理。

通过扩展js 语言,css语言关键字，使得js、css语言具备其它高级语言的特性，比如java,C++ 等,可以通过类似以import 关键字对其它模块中的代码进行引用。从而达到可以像其它高级语言一样进行代码组织编写、编译。通过扩展关键词类似”conf”指定js或css代码里面的内容是属于哪个配置文件下的哪个配置项。本发明所述的方法不扩展关键字，只要在前端代码编译构建时引入了类似配置文件方法达到，前端代码构建时，代码里面的参数内容，可以动态的匹配，来自配置文件里面的配置项。

本发明所述的web前端代码自动化编译构建的模块化开发和发布系统通过扩展js 语言,css语言关键字，使得js、css语言具备其它高级语言的特性，比如java,C++ 等,可以通过类似以import 关键字对其它模块中的代码进行引用。从而达到可以像其它高级语言一样进行代码组织编写、编译。通过其它脚本比如shell及集中化版本管理工具比如svn，及关系数据库对项目中编译成功后的代码进行自动化版本管理和发布管理。通过配置文件管理，可在代码编译或代码实际运行时对js、css代码里面包含的域名，图片地址等其它可通过配置文件管理的属性，动态替换成代码工作实际环境中期望的正确内容。

上述详细描述通过实施例和/或示意图阐明了系统和/或过程的各种实施例。就这些示意图和/或包含一个或多个功能和/或操作而言，本领域技术人员将理解，这些示意图或实施例中的每一个功能和/或操作都可由各种各样的硬件、软件、固件、或实际上其任意组合来单独地和/或共同地实现。

应该理解，本文描述的方法可以结合硬件或软件，或在适当时结合两者的组合来实现。因此，本发明的方法，可以采用包含在诸如软盘、CD-ROM、硬盘驱动器或任何其他机器可读存储介质等有形介质中的程序代码（即，指令）的形式，其中，当程序代码在可编程计算机上执行的情况下，计算设备通常包括处理器、该处理器可读的存储介质(包括易失性存储器和/或存储元件)、至少一个输入设备、以及至少一个输出设备。一个或多个程序可以例如，通过使用API，可重用控件等来实现或利用结合本发明描述的过程。这样的程序优选地用高级过程语言或面向对象编程语言来实现，以与计算机系统通信。然而，如果需要，该程序可以用汇编语言或机器语言来实现。在任何情形中，语言可以是编译语言或解释语言，且与硬件实现相结合。

需要说明的是，本发明的一种web前端代码自动化编译构建的模块化开发和发布系统的方案的范畴包括但不限于上述各部分之间的任意组合。

尽管具体地参考其优选实施例来示出并描述了本发明，但本领域的技术人员可以理解，可以做出形式和细节上的各种改变而不脱离所附权利要求书中所述的本发明的范围。以上结合本发明的具体实施例做了详细描述，但并非是对本发明的限制。凡是依据本发明的技术实质对以上实施例所做的任何简单修改，均仍属于本发明技术方案的范围。

Claims

1.一种web前端代码自动化编译构建的模块化开发和发布系统，其特征在于，所述系统包括web前端代码编译器模块，持续构建和发布管理模块和版本管理中心，其中，

所述web前端代码编译器模块扩展js 语言和css语言的关键字，使得所述js语言和所述css语言具备高级语言的特征。

2.如权利要求1所述的模块化开发和发布系统，其特征在于，所述高级语言的特征为代码组织编写和/或代码组织编译。

3.如权利要求1所述的模块化开发和发布系统，其特征在于，所述扩展js 语言和css语言的关键字为import关键字。

4.如权利要求1所述的模块化开发和发布系统，其特征在于，所述web前端代码编译器模块通过所述扩展所述js语言和所述css语言的关键字，还能够使得所述js语言和所述css语言具备配置文件访问的能力。

5.如权利要求1所述的模块化开发和发布系统，其特征在于，所述持续构建和发布管理模块通过脚本实现自动化持续构建。

6.如权利要求5所述的模块化开发和发布系统，其特征在于，所述持续构建和发布管理模块调用编译器产生编译构建后的正确代码。

7.如权利要求6所述的模块化开发和发布系统，其特征在于，所述持续构建和发布管理模块自动提交到所述版本管理中心。

8.如权利要求7所述的模块化开发和发布系统，其特征在于，所述版本管理中心进行版本管理和发布管理。