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

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

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