本發(fā)明涉及網(wǎng)絡(luò)應(yīng)用技術(shù)領(lǐng)域，特別是涉及一種多頁面資源文件注入方法及裝置。

背景技術(shù)：

在網(wǎng)站產(chǎn)品開發(fā)過程中，多會(huì)利用單頁面應(yīng)用技術(shù)或多頁面應(yīng)用技術(shù)對(duì)頁面進(jìn)行配置。單頁面應(yīng)用是指網(wǎng)站中只存在一個(gè)html頁面，多頁面應(yīng)用是指網(wǎng)站中存在多個(gè)html頁面，一個(gè)頁面對(duì)應(yīng)于一個(gè)資源文件。

目前，在網(wǎng)站產(chǎn)品開發(fā)過程中，多是通過技術(shù)人員手動(dòng)將資源文件寫入到頁面中。

這種方法存在一定缺點(diǎn)，因?yàn)槭謩?dòng)寫入容易出錯(cuò)，尤其是在多頁面應(yīng)用中，這將使得產(chǎn)品開發(fā)效率較低，技術(shù)輸出和技術(shù)成本較高。

技術(shù)實(shí)現(xiàn)要素：

本發(fā)明的目的是提供一種多頁面資源注入方法及裝置，以提高產(chǎn)品開發(fā)效率，減少技術(shù)輸出和技術(shù)成本。

為解決上述技術(shù)問題，本發(fā)明提供如下技術(shù)方案：

一種多頁面資源文件注入方法，包括：

在建設(shè)目標(biāo)網(wǎng)站過程中，獲得頁面參數(shù)配置信息，所述頁面參數(shù)配置信息為在設(shè)定環(huán)境條件下配置完成的；

根據(jù)所述頁面參數(shù)配置信息，確定環(huán)境模式，并生成所述環(huán)境模式對(duì)應(yīng)的webpack配置文件；

建立所述webpack配置文件涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系；

根據(jù)所述關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。

在本發(fā)明的一種具體實(shí)施方式中，在所述根據(jù)所述關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中之前，還包括：

生成各個(gè)資源文件的消息摘要，并進(jìn)行混淆壓縮合并操作。

在本發(fā)明的一種具體實(shí)施方式中，所述環(huán)境模式為開發(fā)模式或者生產(chǎn)模式。

在本發(fā)明的一種具體實(shí)施方式中，在所述接收頁面參數(shù)配置信息之后，還包括：

對(duì)所述頁面參數(shù)配置信息中的各參數(shù)進(jìn)行校驗(yàn)；

如果檢驗(yàn)通過，則執(zhí)行所述根據(jù)所述頁面參數(shù)配置信息，確定環(huán)境模式，并生成所述環(huán)境模式對(duì)應(yīng)的webpack配置文件的步驟。

在本發(fā)明的一種具體實(shí)施方式中，還包括：

如果檢驗(yàn)失敗，則輸出失敗提示信息。

在本發(fā)明的一種具體實(shí)施方式中，所述頁面參數(shù)配置信息中包括入口文件參數(shù)信息、指定目錄參數(shù)信息、環(huán)境模式參數(shù)信息、資源文件注入相關(guān)參數(shù)信息。

一種多頁面資源文件注入裝置，包括：

配置信息獲得模塊，用于在建設(shè)目標(biāo)網(wǎng)站過程中，獲得頁面參數(shù)配置信息，所述頁面參數(shù)配置信息為在設(shè)定環(huán)境條件下配置完成的；

配置文件生成模塊，用于根據(jù)所述頁面參數(shù)配置信息，確定環(huán)境模式，并生成所述環(huán)境模式對(duì)應(yīng)的webpack配置文件；

關(guān)聯(lián)關(guān)系建立模塊，用于建立所述webpack配置文件涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系；

文件注入模塊，用于根據(jù)所述關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。

在本發(fā)明的一種具體實(shí)施方式中，還包括預(yù)處理模塊，用于：

在所述根據(jù)所述關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中之前，生成各個(gè)資源文件的消息摘要，并進(jìn)行混淆壓縮合并操作。

在本發(fā)明的一種具體實(shí)施方式中，還包括參數(shù)校驗(yàn)?zāi)K，用于：

在所述接收頁面參數(shù)配置信息之后，對(duì)所述頁面參數(shù)配置信息中的各參數(shù)進(jìn)行校驗(yàn)；如果檢驗(yàn)通過，則觸發(fā)所述配置文件生成模塊。

在本發(fā)明的一種具體實(shí)施方式中，還包括信息提示模塊，用于：

在所述參數(shù)校驗(yàn)?zāi)K檢驗(yàn)失敗時(shí)，輸出失敗提示信息。

應(yīng)用本發(fā)明實(shí)施例所提供的技術(shù)方案，在建設(shè)目標(biāo)網(wǎng)站過程中，獲得頁面參數(shù)配置信息，根據(jù)頁面參數(shù)配置信息，確定環(huán)境模式，并生成環(huán)境模式對(duì)應(yīng)的webpack配置文件，基于該webpack配置文件，建立其涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系，根據(jù)關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。資源文件基于配置式的方式，自動(dòng)為頁面文件注入對(duì)應(yīng)的資源文件，克服了現(xiàn)有技術(shù)中手動(dòng)將資源文件寫入到頁面文件中的缺點(diǎn)，提高了產(chǎn)品開發(fā)效率，減少了技術(shù)輸出和技術(shù)成本。

附圖說明

為了更清楚地說明本發(fā)明實(shí)施例或現(xiàn)有技術(shù)中的技術(shù)方案，下面將對(duì)實(shí)施例或現(xiàn)有技術(shù)描述中所需要使用的附圖作簡(jiǎn)單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的一些實(shí)施例，對(duì)于本領(lǐng)域普通技術(shù)人員來講，在不付出創(chuàng)造性勞動(dòng)的前提下，還可以根據(jù)這些附圖獲得其他的附圖。

圖1為本發(fā)明實(shí)施例中一種多頁面資源注入方法的實(shí)施流程圖；

圖2為本發(fā)明實(shí)施例中一種多頁面資源注入裝置的結(jié)構(gòu)示意圖。

具體實(shí)施方式

為了使本技術(shù)領(lǐng)域的人員更好地理解本發(fā)明方案，下面結(jié)合附圖和具體實(shí)施方式對(duì)本發(fā)明作進(jìn)一步的詳細(xì)說明。顯然，所描述的實(shí)施例僅僅是本發(fā)明一部分實(shí)施例，而不是全部的實(shí)施例?；诒景l(fā)明中的實(shí)施例，本領(lǐng)域普通技術(shù)人員在沒有做出創(chuàng)造性勞動(dòng)前提下所獲得的所有其他實(shí)施例，都屬于本發(fā)明保護(hù)的范圍。

參見圖1所示，為本發(fā)明實(shí)施例所提供的一種多頁面資源文件注入方法的實(shí)施流程圖，該方法可以包括以下步驟：

s110：在建設(shè)目標(biāo)網(wǎng)站過程中，獲得頁面參數(shù)配置信息。

頁面參數(shù)配置信息為在設(shè)定環(huán)境條件下配置完成的。

在本發(fā)明實(shí)施例中，在建設(shè)目標(biāo)網(wǎng)站過程中，開發(fā)者可以先對(duì)頁面相關(guān)參數(shù)進(jìn)行配置。本發(fā)明實(shí)施例利用webpack技術(shù)進(jìn)行多頁面資源文件注入。開發(fā)者在配置頁面相關(guān)參數(shù)之前，需安裝相關(guān)環(huán)境和工具，主要包括node.js，附帶npm。

node.js是一個(gè)基于chromejavascript運(yùn)行時(shí)建立的平臺(tái)，用于方便搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。node.js使用事件驅(qū)動(dòng)，非阻塞i/o模型而得以輕量和高效，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。npm為一個(gè)基于node.js的包管理器，可以使用其中的各種基于node.js的開源庫。

相關(guān)環(huán)境和工具安裝成功后，可以執(zhí)行cmd命令，安裝依賴包。因?yàn)閣ebpack是一個(gè)開源的javascript模塊包。webpack需要具有依賴關(guān)系的模塊，并生成表示這些模塊的靜態(tài)資產(chǎn)。其需要依賴關(guān)系并生成一個(gè)依賴圖，允許開發(fā)者使用模塊化方法進(jìn)行web應(yīng)用程序開發(fā)。

進(jìn)而，開發(fā)者可以在以上設(shè)定環(huán)境條件下配置頁面參數(shù)。在本發(fā)明實(shí)施例中，頁面參數(shù)配置信息中可以包括入口文件參數(shù)entry信息、指定目錄參數(shù)directories信息、環(huán)境模式參數(shù)信息、資源文件注入相關(guān)參數(shù)信息。其中，環(huán)境模式為開發(fā)模式或者生產(chǎn)模式。資源文件注入相關(guān)參數(shù)主要包括頁面標(biāo)題、頁面所需注入的入口文件列表、要被注入資源的頁面文件以及編譯生成的文件等。配置成功后，可以將頁面參數(shù)配置信息發(fā)送給后臺(tái)。

后臺(tái)獲得頁面參數(shù)配置信息后，可以繼續(xù)執(zhí)行步驟s120的操作。

在本發(fā)明的一種具體實(shí)施方式中，在步驟s110之后，該方法還可以包括以下步驟：

對(duì)頁面參數(shù)配置信息中的各參數(shù)進(jìn)行校驗(yàn)，如果校驗(yàn)通過，則繼續(xù)執(zhí)行步驟s120的操作。

獲得頁面參數(shù)配置信息后，可以先對(duì)頁面參數(shù)配置信息中的各參數(shù)進(jìn)行校驗(yàn)，確定各參數(shù)的合法性，如果校驗(yàn)通過，則繼續(xù)執(zhí)行步驟s120的操作，否則，可以不做任何操作，或者，在校驗(yàn)失敗時(shí)，輸出失敗提示信息，以便開發(fā)者自行檢查頁面參數(shù)配置信息中各參數(shù)的合法性。

s120：根據(jù)頁面參數(shù)配置信息，確定環(huán)境模式，并生成環(huán)境模式對(duì)應(yīng)的webpack配置文件。

頁面參數(shù)配置信息中包含環(huán)境模式參數(shù)信息。獲得頁面參數(shù)配置信息后，可以從頁面參數(shù)配置信息中提取環(huán)境模式參數(shù)信息，進(jìn)而確定環(huán)境模式。并基于該環(huán)境模式，生成該環(huán)境模式對(duì)應(yīng)的webpack配置文件。不同環(huán)境模式下可以執(zhí)行不同的webpack配置。

舉例而言，如果該環(huán)境模式為開發(fā)模式，則生成的webpack配置文件中需配置代碼熱加載功能，以適應(yīng)本地開發(fā)需要。

如果該環(huán)境模式為生產(chǎn)模式，則生成的webpack配置文件中需配置代碼自動(dòng)壓縮合并，以及生成sourcemap文件的功能，同時(shí)還可配置圖片自動(dòng)進(jìn)行base64編碼的功能。

s130：建立webpack配置文件涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系。

生成環(huán)境模式對(duì)應(yīng)的webpack配置文件后，基于webpack配置文件，可以建立webpack配置文件涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系。即確定哪個(gè)資源文件與哪個(gè)頁面文件相關(guān)聯(lián)。

s140：根據(jù)關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。

根據(jù)步驟s130建立的關(guān)聯(lián)關(guān)系，可以將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中，實(shí)現(xiàn)多頁面資源文件自動(dòng)注入。

在本發(fā)明的一個(gè)實(shí)施例中，在步驟s140之前，該方法還可以包括以下步驟：

生成各個(gè)資源文件的消息摘要，并進(jìn)行混淆壓縮合并操作。

生成各個(gè)資源文件的消息摘要，如使用md5消息摘要算法生成各個(gè)資源文件的消息摘要，進(jìn)而進(jìn)行混淆壓縮合并操作，再將進(jìn)行混淆壓縮合并操作的各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。

本發(fā)明實(shí)施例對(duì)webpack技術(shù)進(jìn)行了擴(kuò)展和延伸，使其不僅適用于單頁面應(yīng)用，也能夠適用于多頁面應(yīng)用，擴(kuò)寬了其使用場(chǎng)景。

應(yīng)用本發(fā)明實(shí)施例所提供的方法，在建設(shè)目標(biāo)網(wǎng)站過程中，獲得頁面參數(shù)配置信息，根據(jù)頁面參數(shù)配置信息，確定環(huán)境模式，并生成環(huán)境模式對(duì)應(yīng)的webpack配置文件，基于該webpack配置文件，建立其涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系，根據(jù)關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。資源文件基于配置式的方式，自動(dòng)為頁面文件注入對(duì)應(yīng)的資源文件，克服了現(xiàn)有技術(shù)中手動(dòng)將資源文件寫入到頁面文件中的缺點(diǎn)，提高了產(chǎn)品開發(fā)效率，減少了技術(shù)輸出和技術(shù)成本。

相應(yīng)于上面的方法實(shí)施例，本發(fā)明實(shí)施例還提供了一種一種多頁面資源文件注入裝置，下文描述的一種多頁面資源文件注入裝置與上文描述的一種多頁面資源文件注入方法可相互對(duì)應(yīng)參照。

參見圖2所示，該裝置包括以下模塊：

配置信息獲得模塊210，用于在建設(shè)目標(biāo)網(wǎng)站過程中，獲得頁面參數(shù)配置信息，頁面參數(shù)配置信息為在設(shè)定環(huán)境條件下配置完成的；

配置文件生成模塊220，用于根據(jù)頁面參數(shù)配置信息，確定環(huán)境模式，并生成環(huán)境模式對(duì)應(yīng)的webpack配置文件；

關(guān)聯(lián)關(guān)系建立模塊230，用于建立webpack配置文件涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系；

文件注入模塊240，用于根據(jù)關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。

應(yīng)用本發(fā)明實(shí)施例所提供的裝置，在建設(shè)目標(biāo)網(wǎng)站過程中，獲得頁面參數(shù)配置信息，根據(jù)頁面參數(shù)配置信息，確定環(huán)境模式，并生成環(huán)境模式對(duì)應(yīng)的webpack配置文件，基于該webpack配置文件，建立其涉及的各個(gè)資源文件與頁面文件的關(guān)聯(lián)關(guān)系，根據(jù)關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中。資源文件基于配置式的方式，自動(dòng)為頁面文件注入對(duì)應(yīng)的資源文件，克服了現(xiàn)有技術(shù)中手動(dòng)將資源文件寫入到頁面文件中的缺點(diǎn)，提高了產(chǎn)品開發(fā)效率，減少了技術(shù)輸出和技術(shù)成本。

在本發(fā)明的一種具體實(shí)施方式中，還包括預(yù)處理模塊，用于：

在根據(jù)關(guān)聯(lián)關(guān)系，將各個(gè)資源文件分別注入到相關(guān)聯(lián)的頁面文件中之前，生成各個(gè)資源文件的消息摘要，并進(jìn)行混淆壓縮合并操作。

在本發(fā)明的一種具體實(shí)施方式中，還包括參數(shù)校驗(yàn)?zāi)K，用于：

在接收頁面參數(shù)配置信息之后，對(duì)頁面參數(shù)配置信息中的各參數(shù)進(jìn)行校驗(yàn)；如果檢驗(yàn)通過，則觸發(fā)配置文件生成模塊220。

在本發(fā)明的一種具體實(shí)施方式中，還包括信息提示模塊，用于：

在參數(shù)校驗(yàn)?zāi)K檢驗(yàn)失敗時(shí)，輸出失敗提示信息。

在本發(fā)明的一種具體實(shí)施方式中，環(huán)境模式為開發(fā)模式或者生產(chǎn)模式。

在本發(fā)明的一種具體實(shí)施方式中，頁面參數(shù)配置信息中包括入口文件參數(shù)信息、指定目錄參數(shù)信息、環(huán)境模式參數(shù)信息、資源文件注入相關(guān)參數(shù)信息。

本說明書中各個(gè)實(shí)施例采用遞進(jìn)的方式描述，每個(gè)實(shí)施例重點(diǎn)說明的都是與其它實(shí)施例的不同之處，各個(gè)實(shí)施例之間相同或相似部分互相參見即可。對(duì)于實(shí)施例公開的裝置而言，由于其與實(shí)施例公開的方法相對(duì)應(yīng)，所以描述的比較簡(jiǎn)單，相關(guān)之處參見方法部分說明即可。

專業(yè)人員還可以進(jìn)一步意識(shí)到，結(jié)合本文中所公開的實(shí)施例描述的各示例的單元及算法步驟，能夠以電子硬件、計(jì)算機(jī)軟件或者二者的結(jié)合來實(shí)現(xiàn)，為了清楚地說明硬件和軟件的可互換性，在上述說明中已經(jīng)按照功能一般性地描述了各示例的組成及步驟。這些功能究竟以硬件還是軟件方式來執(zhí)行，取決于技術(shù)方案的特定應(yīng)用和設(shè)計(jì)約束條件。專業(yè)技術(shù)人員可以對(duì)每個(gè)特定的應(yīng)用來使用不同方法來實(shí)現(xiàn)所描述的功能，但是這種實(shí)現(xiàn)不應(yīng)認(rèn)為超出本發(fā)明的范圍。

結(jié)合本文中所公開的實(shí)施例描述的方法或算法的步驟可以直接用硬件、處理器執(zhí)行的軟件模塊，或者二者的結(jié)合來實(shí)施。軟件模塊可以置于隨機(jī)存儲(chǔ)器(ram)、內(nèi)存、只讀存儲(chǔ)器(rom)、電可編程rom、電可擦除可編程rom、寄存器、硬盤、可移動(dòng)磁盤、cd-rom、或技術(shù)領(lǐng)域內(nèi)所公知的任意其它形式的存儲(chǔ)介質(zhì)中。

本文中應(yīng)用了具體個(gè)例對(duì)本發(fā)明的原理及實(shí)施方式進(jìn)行了闡述，以上實(shí)施例的說明只是用于幫助理解本發(fā)明的技術(shù)方案及其核心思想。應(yīng)當(dāng)指出，對(duì)于本技術(shù)領(lǐng)域的普通技術(shù)人員來說，在不脫離本發(fā)明原理的前提下，還可以對(duì)本發(fā)明進(jìn)行若干改進(jìn)和修飾，這些改進(jìn)和修飾也落入本發(fā)明權(quán)利要求的保護(hù)范圍內(nèi)。