一種web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)的制作方法
【專利摘要】本發(fā)明提供一種web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，所述系統(tǒng)包括web前端代碼編譯器模塊，持續(xù)構(gòu)建和發(fā)布管理模塊和版本管理中心。本發(fā)明提供的系統(tǒng)用于解決js語(yǔ)言css語(yǔ)言本身不夠靈活的現(xiàn)狀，使得web前端開(kāi)發(fā)人員能像后臺(tái)開(kāi)發(fā)人員使用其它高級(jí)語(yǔ)言一樣，靈活使用js、css語(yǔ)言進(jìn)行模塊化開(kāi)發(fā)編譯集成。及對(duì)Web前端代碼可進(jìn)行持續(xù)化自動(dòng)化構(gòu)建發(fā)布管理，提高web前端開(kāi)發(fā)人員的工作效率及團(tuán)隊(duì)間的協(xié)同工作能力。同時(shí)，還解決傳統(tǒng)的一個(gè)頁(yè)面需要引用多個(gè)js/css資源文件，降低瀏覽器對(duì)資源的請(qǐng)求次數(shù)，減輕服務(wù)壓力。
【專利說(shuō)明】一種web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及前端開(kāi)發(fā)環(huán)境搭建的【技術(shù)領(lǐng)域】，更具體地，涉及一種web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)。
【背景技術(shù)】
[0002]在網(wǎng)站開(kāi)發(fā)和運(yùn)行過(guò)程中，需要搭建Web前端開(kāi)發(fā)環(huán)境對(duì)網(wǎng)站的項(xiàng)目開(kāi)發(fā)，對(duì)存在問(wèn)題的內(nèi)容進(jìn)行修改和調(diào)試?，F(xiàn)有技術(shù)中，Web前端開(kāi)發(fā)環(huán)境常常需要用到CDN內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)器，具體而言，正常訪問(wèn)網(wǎng)頁(yè)時(shí)會(huì)附帶訪問(wèn)很多資源文件，比如css，js文件等。⑶N內(nèi)容分發(fā)網(wǎng)絡(luò)服務(wù)器就是存放這些css和js的文件。
[0003]當(dāng)今Js腳本語(yǔ)言和css語(yǔ)言，是互聯(lián)網(wǎng)時(shí)代不可缺少的兩門語(yǔ)言。Web前端開(kāi)發(fā)團(tuán)隊(duì)是開(kāi)發(fā)web應(yīng)用不可缺少的重要團(tuán)隊(duì)，在復(fù)雜的互聯(lián)網(wǎng)應(yīng)用環(huán)境中，如何提高js、css語(yǔ)言本身的使用靈活性，及如何構(gòu)建一套屬于Web前端團(tuán)隊(duì)的可持續(xù)化構(gòu)建和發(fā)布管理平臺(tái)、測(cè)試平臺(tái)。
[0004]關(guān)于如何搭建Web前端可持續(xù)構(gòu)建和發(fā)布的方案和技術(shù)，目前比較有代表的是基于Jenkins搭建Web前端開(kāi)發(fā)的持續(xù)化構(gòu)建環(huán)境,能夠自動(dòng)化持續(xù)構(gòu)建web前端項(xiàng)目代碼，及發(fā)布到遠(yuǎn)程相應(yīng)的環(huán)境。但現(xiàn)實(shí)中一個(gè)這樣工具完全不能滿足Web前端開(kāi)發(fā)團(tuán)隊(duì)的需求，具體的不足如下:
首先，多人如何協(xié)同開(kāi)發(fā)代碼？例如a寫com.js,b寫ml.js里面import 了 com.js模塊，c 寫 p.js 里面 import 了 com.js 及 ml.js。
[0005]其次，如何減少頁(yè)面中對(duì)js、css內(nèi)容的請(qǐng)求次數(shù)。比如現(xiàn)在一個(gè)頁(yè)面引用了
1.css, 2.css及1.js, 2.js.瀏覽器需要向服務(wù)端發(fā)起4次請(qǐng)求，如何將4次請(qǐng)求變成兩次請(qǐng)求。
[0006]最后，沒(méi)有相關(guān)的單元測(cè)試配套環(huán)境?；贘s css代碼模塊化開(kāi)發(fā)及自動(dòng)化編譯發(fā)布系統(tǒng))開(kāi)發(fā)出來(lái)的產(chǎn)品能很好的解決以上問(wèn)題。
[0007]目前解決上述不足之處的現(xiàn)有技術(shù)的缺點(diǎn)如下:
首先，Jenkins是基于java語(yǔ)言實(shí)現(xiàn)的持續(xù)化構(gòu)建平臺(tái),適合大部分后臺(tái)團(tuán)隊(duì),但不適合Web前端開(kāi)發(fā)團(tuán)隊(duì)。Jenkins持續(xù)構(gòu)建不能按需構(gòu)建包含正確內(nèi)容的版本:編譯構(gòu)建過(guò)程中開(kāi)發(fā)人員不能按需替換代碼中的內(nèi)容。比如同一分css代碼中的圖片地址域名在不同生產(chǎn)環(huán)境內(nèi)容可能不一樣，使用jenkins不能靈活按需編譯構(gòu)建需要的版本。
[0008]其次，不能對(duì)模塊化的js、css代碼進(jìn)行編譯構(gòu)建，不能解決代碼文件中的相互引用造成代碼冗余。
[0009]當(dāng)web前端開(kāi)發(fā)人員/團(tuán)隊(duì)在復(fù)雜的環(huán)境下進(jìn)行項(xiàng)目開(kāi)發(fā)、發(fā)布時(shí)，沒(méi)有一個(gè)完整易用的項(xiàng)目代碼管理和發(fā)布版本及環(huán)境維護(hù)管理平臺(tái)工具。這個(gè)工具需要從源代碼、到編譯、到單元測(cè)試、到構(gòu)建線上版本管理、到發(fā)版行為記錄管理中的每個(gè)步驟進(jìn)行追蹤查詢。
【發(fā)明內(nèi)容】

[0010]本發(fā)明提供的web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)用于解決js語(yǔ)言CSS語(yǔ)言本身不夠靈活的現(xiàn)狀，使得web前端開(kāi)發(fā)人員能像后臺(tái)開(kāi)發(fā)人員使用其它高級(jí)語(yǔ)言一樣，靈活使用js、css語(yǔ)言進(jìn)行模塊化開(kāi)發(fā)編譯集成。及對(duì)Web前端代碼可進(jìn)行持續(xù)化自動(dòng)化構(gòu)建發(fā)布管理，提高web前端開(kāi)發(fā)人員的工作效率及團(tuán)隊(duì)間的協(xié)同工作能力。同時(shí)，還解決傳統(tǒng)的一個(gè)頁(yè)面需要引用多個(gè)js/css資源文件，降低瀏覽器對(duì)資源的請(qǐng)求次數(shù)，減輕服務(wù)壓力。
[0011]本發(fā)明提供一種web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，所述系統(tǒng)包括web前端代碼編譯器模塊，持續(xù)構(gòu)建和發(fā)布管理模塊和版本管理中心，其中，所述web前端代碼編譯器模塊擴(kuò)展js語(yǔ)言和css語(yǔ)言的關(guān)鍵字，使得所述js語(yǔ)言和所述css語(yǔ)目具備聞級(jí)語(yǔ)目的特征。
[0012]在上述任一方案中優(yōu)選的是，所述高級(jí)語(yǔ)言的特征為代碼組織編寫和/或代碼組織編譯。
[0013]在上述任一方案中優(yōu)選的是,所述擴(kuò)展js語(yǔ)言和css語(yǔ)言的關(guān)鍵字為import關(guān)鍵字。
[0014]在上述任一方案中優(yōu)選的是，所述web前端代碼編譯器模塊通過(guò)所述擴(kuò)展所述js語(yǔ)言和所述CSS語(yǔ)言的關(guān)鍵字，還能夠使得所述js語(yǔ)言和所述CSS語(yǔ)言具備配置文件訪問(wèn)的能力。
[0015]在上述任一方案中優(yōu)選的是，所述持續(xù)構(gòu)建和發(fā)布管理模塊通過(guò)腳本實(shí)現(xiàn)自動(dòng)化持續(xù)構(gòu)建。
[0016]在上述任一方案中優(yōu)選的是，所述持續(xù)構(gòu)建和發(fā)布管理模塊調(diào)用編譯器產(chǎn)生編譯構(gòu)建后的正確代碼。
[0017]在上述任一方案中優(yōu)選的是，所述持續(xù)構(gòu)建和發(fā)布管理模塊自動(dòng)提交到所述版本
管理中心。
[0018]在上述任一方案中優(yōu)選的是，所述版本管理中心進(jìn)行版本管理和發(fā)布管理。
【專利附圖】

【附圖說(shuō)明】
[0019]為了使本發(fā)明便于理解，現(xiàn)在結(jié)合附圖描述本發(fā)明的具體實(shí)施例。
[0020]圖1示出了本發(fā)明一優(yōu)選實(shí)施例的工作流程圖。
【具體實(shí)施方式】
[0021]下面結(jié)合附圖和優(yōu)選的實(shí)施方式對(duì)本發(fā)明作進(jìn)一步詳細(xì)描述。權(quán)利要求中構(gòu)成要件和實(shí)施例中具體實(shí)例之間的對(duì)應(yīng)關(guān)系可以如下例證。這里的描述意圖在于確認(rèn)在實(shí)施例中描述了用來(lái)支持在權(quán)利要求中陳述的主題的具體實(shí)例，由于在實(shí)施例中描述了實(shí)例，不意味著該具體實(shí)例不表示構(gòu)成要件。相反地，即使在此包含了具體實(shí)例作為對(duì)應(yīng)一個(gè)構(gòu)成要件的要素特征，也不意味著該具體實(shí)例不表示任何其它構(gòu)成要件。
[0022]此外，這里的描述不意味著對(duì)應(yīng)于實(shí)施例中陳述的具體實(shí)例的所有主題都在權(quán)利要求中引用了。換句話說(shuō)，這里的描述不否認(rèn)這種實(shí)體，即對(duì)應(yīng)實(shí)施例包含的具體實(shí)例，但不包含在其任何一項(xiàng)權(quán)利要求中，即，能夠在以后的修正被分案并申請(qǐng)、或增加的可能發(fā)明的實(shí)體。
[0023]應(yīng)當(dāng)注意的是，“系統(tǒng)”在此意味著由兩個(gè)或更多設(shè)備構(gòu)成的處理。
[0024]顯而易見(jiàn)地，用戶終端可以由個(gè)人計(jì)算機(jī)構(gòu)成。此外，所述用戶終端還可以由例如蜂窩電話、任何其它PDA (個(gè)人數(shù)字助理)工具、AV (音頻視頻)裝置、諸如家用電氣(家庭用電氣化)設(shè)備的CE (消費(fèi)電子設(shè)備)等構(gòu)成。
[0025]“網(wǎng)絡(luò)”意味著至少連接了兩個(gè)設(shè)備的機(jī)構(gòu)，并且在其中，一條信息能夠從一個(gè)設(shè)備發(fā)送到另一個(gè)設(shè)備。經(jīng)由網(wǎng)絡(luò)建立通信的設(shè)備可以是彼此分離的，也可以是構(gòu)成一個(gè)機(jī)器的內(nèi)部模塊。
[0026]“通信”可表示無(wú)線通信和有線通信。然而，還可以是混合無(wú)線和有線通信的通信，更具體地，在某個(gè)區(qū)段采取無(wú)線通信而在另一個(gè)區(qū)段采取有線通信的通信。同樣，它也可以是這樣的通信:從一個(gè)設(shè)備向另一設(shè)備的通信是有線的，且相反方向的通信是無(wú)線的。
[0027]本發(fā)明所述的系統(tǒng)包括web前端代碼編譯器模塊和持續(xù)構(gòu)建和發(fā)布管理模塊。
[0028]其中，所述web前端代碼編譯器模塊包括:首先，通過(guò)擴(kuò)展js語(yǔ)言，css語(yǔ)言關(guān)鍵字，使得js、CSS語(yǔ)言具備其它高級(jí)語(yǔ)言的特性，比如java，C++等，可以通過(guò)類似以import關(guān)鍵字對(duì)其它模塊中的代碼進(jìn)行引用。從而達(dá)到可以像其它高級(jí)語(yǔ)言一樣進(jìn)行代碼組織編寫、編譯。
[0029]例如:傳統(tǒng)一個(gè)頁(yè)面(A.html)里面引用了四個(gè)js文件jquery.js、cl.js、c2.js、c3.js,其中這些單獨(dú)的js是由團(tuán)隊(duì)內(nèi)部同的人寫的且cl c2 c3都需要依賴jquery.js。c2.js c3.js里面又包含了 cl.js里面的大部分邏輯,c3.js里面又包含了 c2.js邏輯。通過(guò)通過(guò)擴(kuò)展js語(yǔ)言類似“import”關(guān)鍵字，可最終實(shí)現(xiàn)a.html里面只引用一個(gè)js文件
B.JS0
[0030]其中a.js 里面的內(nèi)容為:$MP0RT(’ jquery.js ’)； $ IMPORT (' cl.js’);$ IMPORT (’ c2.js，); $ IMPORT (’ c3.js’)。
[0031]同樣地，cl c2 c3 js也可以通過(guò)$MP0RT對(duì)其它模塊進(jìn)行引用c2引用cl，c3引用Cl、c2，這樣每個(gè)模塊相互引用，減少了冗余代碼。且A.html里面再也不需要引用多個(gè)js文件只需要應(yīng)用一個(gè)a.js,大大降低了瀏覽器對(duì)js或css的請(qǐng)求次數(shù)。
[0032]Css同樣也是通過(guò)類似關(guān)鍵字” import”，引用不同模塊的代碼。
[0033]其次，所述web前端代碼編譯器模塊通過(guò)擴(kuò)展js/css語(yǔ)言關(guān)鍵字，使得js/css具備配置文件訪問(wèn)的能力。因?yàn)椋鞣N環(huán)境下代碼中需要的資源數(shù)據(jù)不一樣，可以通過(guò)配置管理這些可能會(huì)動(dòng)態(tài)改變的數(shù)據(jù)比如背景圖片的地址。
[0034]例如:傳統(tǒng)的css里面引用一個(gè)背景圖片的寫法如下:
background:urI (http://www.test/image/dop/open/1.png)。在這段代石馬里 url 后面的http://www.test/image/dop/open/1.png可能在不同的環(huán)境需要的內(nèi)容不一樣。這個(gè)時(shí)候可通過(guò)擴(kuò)展關(guān)鍵詞類似” conf”指定里面的內(nèi)容是屬于哪個(gè)配置文件下的哪個(gè)配置項(xiàng)，因此，這段代碼可修改成如下:background:url ($conf.css.cssproperties.backgound)。
[0035]同時(shí)在項(xiàng)目根目錄下創(chuàng)建一個(gè)conf/css/ cssproperties.properties文件，并且文件里面力口上 backgound=http: //www.test/image/dop/open/1.png
所述持續(xù)構(gòu)建和發(fā)布管理模塊通過(guò)腳本實(shí)現(xiàn)自動(dòng)化持續(xù)構(gòu)建，主要是調(diào)用編譯器產(chǎn)生編譯構(gòu)建后的正確代碼，并自動(dòng)提交到版本管理中心進(jìn)行版本管理和發(fā)布管理。[0036]通過(guò)擴(kuò)展js語(yǔ)言，css語(yǔ)言關(guān)鍵字，使得jS、CSS語(yǔ)言具備其它高級(jí)語(yǔ)言的特性，比如java，C++等，可以通過(guò)類似以import關(guān)鍵字對(duì)其它模塊中的代碼進(jìn)行引用。從而達(dá)到可以像其它高級(jí)語(yǔ)言一樣進(jìn)行代碼組織編寫、編譯。通過(guò)擴(kuò)展關(guān)鍵詞類似”conf”指定js或css代碼里面的內(nèi)容是屬于哪個(gè)配置文件下的哪個(gè)配置項(xiàng)。本發(fā)明所述的方法不擴(kuò)展關(guān)鍵字，只要在前端代碼編譯構(gòu)建時(shí)引入了類似配置文件方法達(dá)到，前端代碼構(gòu)建時(shí)，代碼里面的參數(shù)內(nèi)容，可以動(dòng)態(tài)的匹配，來(lái)自配置文件里面的配置項(xiàng)。
[0037]本發(fā)明所述的web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)通過(guò)擴(kuò)展js語(yǔ)目，css語(yǔ)目關(guān)鍵字,使得js、css語(yǔ)目具備其它聞級(jí)語(yǔ)目的特性，比如java, C++等，可以通過(guò)類似以import關(guān)鍵字對(duì)其它模塊中的代碼進(jìn)行引用。從而達(dá)到可以像其它高級(jí)語(yǔ)言一樣進(jìn)行代碼組織編寫、編譯。通過(guò)其它腳本比如shell及集中化版本管理工具比如svn，及關(guān)系數(shù)據(jù)庫(kù)對(duì)項(xiàng)目中編譯成功后的代碼進(jìn)行自動(dòng)化版本管理和發(fā)布管理。通過(guò)配置文件管理，可在代碼編譯或代碼實(shí)際運(yùn)行時(shí)對(duì)js、css代碼里面包含的域名，圖片地址等其它可通過(guò)配置文件管理的屬性，動(dòng)態(tài)替換成代碼工作實(shí)際環(huán)境中期望的正確內(nèi)容。
[0038]上述詳細(xì)描述通過(guò)實(shí)施例和/或示意圖闡明了系統(tǒng)和/或過(guò)程的各種實(shí)施例。就這些示意圖和/或包含一個(gè)或多個(gè)功能和/或操作而言，本領(lǐng)域技術(shù)人員將理解，這些示意圖或?qū)嵤├械拿恳粋€(gè)功能和/或操作都可由各種各樣的硬件、軟件、固件、或?qū)嶋H上其任意組合來(lái)單獨(dú)地和/或共同地實(shí)現(xiàn)。
[0039]應(yīng)該理解，本文描述的方法可以結(jié)合硬件或軟件，或在適當(dāng)時(shí)結(jié)合兩者的組合來(lái)實(shí)現(xiàn)。因此，本發(fā)明的方法，可以采用包含在諸如軟盤、CD-ROM、硬盤驅(qū)動(dòng)器或任何其他機(jī)器可讀存儲(chǔ)介質(zhì)等有形介質(zhì)中的程序代碼(即，指令)的形式，其中，當(dāng)程序代碼在可編程計(jì)算機(jī)上執(zhí)行的情況下，計(jì)算設(shè)備通常包括處理器、該處理器可讀的存儲(chǔ)介質(zhì)(包括易失性存儲(chǔ)器和/或存儲(chǔ)元件)、至少一個(gè)輸入設(shè)備、以及至少一個(gè)輸出設(shè)備。一個(gè)或多個(gè)程序可以例如，通過(guò)使用API，可重用控件等來(lái)實(shí)現(xiàn)或利用結(jié)合本發(fā)明描述的過(guò)程。這樣的程序優(yōu)選地用高級(jí)過(guò)程語(yǔ)言或面向?qū)ο缶幊陶Z(yǔ)言來(lái)實(shí)現(xiàn)，以與計(jì)算機(jī)系統(tǒng)通信。然而，如果需要，該程序可以用匯編語(yǔ)言或機(jī)器語(yǔ)言來(lái)實(shí)現(xiàn)。在任何情形中，語(yǔ)言可以是編譯語(yǔ)言或解釋語(yǔ)言，且與硬件實(shí)現(xiàn)相結(jié)合。
[0040]需要說(shuō)明的是，本發(fā)明的一種web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)的方案的范疇包括但不限于上述各部分之間的任意組合。
[0041 ] 盡管具體地參考其優(yōu)選實(shí)施例來(lái)示出并描述了本發(fā)明，但本領(lǐng)域的技術(shù)人員可以理解，可以做出形式和細(xì)節(jié)上的各種改變而不脫離所附權(quán)利要求書中所述的本發(fā)明的范圍。以上結(jié)合本發(fā)明的具體實(shí)施例做了詳細(xì)描述，但并非是對(duì)本發(fā)明的限制。凡是依據(jù)本發(fā)明的技術(shù)實(shí)質(zhì)對(duì)以上實(shí)施例所做的任何簡(jiǎn)單修改，均仍屬于本發(fā)明技術(shù)方案的范圍。
【權(quán)利要求】
1.一種web前端代碼自動(dòng)化編譯構(gòu)建的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述系統(tǒng)包括web前端代碼編譯器模塊，持續(xù)構(gòu)建和發(fā)布管理模塊和版本管理中心，其中， 所述web前端代碼編譯器模塊擴(kuò)展js語(yǔ)言和css語(yǔ)言的關(guān)鍵字，使得所述js語(yǔ)言和所述css語(yǔ)言具備高級(jí)語(yǔ)言的特征。
2.如權(quán)利要求1所述的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述高級(jí)語(yǔ)言的特征為代碼組織編寫和/或代碼組織編譯。
3.如權(quán)利要求1所述的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述擴(kuò)展js語(yǔ)言和css語(yǔ)言的關(guān)鍵字為import關(guān)鍵字。
4.如權(quán)利要求1所述的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述web前端代碼編譯器模塊通過(guò)所述擴(kuò)展所述js語(yǔ)言和所述css語(yǔ)言的關(guān)鍵字，還能夠使得所述js語(yǔ)言和所述css語(yǔ)言具備配置文件訪問(wèn)的能力。
5.如權(quán)利要求1所述的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述持續(xù)構(gòu)建和發(fā)布管理模塊通過(guò)腳本實(shí)現(xiàn)自動(dòng)化持續(xù)構(gòu)建。
6.如權(quán)利要求5所述的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述持續(xù)構(gòu)建和發(fā)布管理模塊調(diào)用編譯器產(chǎn)生編譯構(gòu)建后的正確代碼。
7.如權(quán)利要求6所述的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述持續(xù)構(gòu)建和發(fā)布管理模塊自動(dòng)提交到所述版本管理中心。
8.如權(quán)利要求7所述的模塊化開(kāi)發(fā)和發(fā)布系統(tǒng)，其特征在于，所述版本管理中心進(jìn)行版本管理和發(fā)布管理。
【文檔編號(hào)】G06F9/45GK103955361SQ201410122342
【公開(kāi)日】2014年7月30日 申請(qǐng)日期:2014年3月28日 優(yōu)先權(quán)日:2014年3月28日
【發(fā)明者】李定坤, 馬海東 申請(qǐng)人:世紀(jì)禾光科技發(fā)展（北京）有限公司