国产精品1024永久观看,大尺度欧美暖暖视频在线观看,亚洲宅男精品一区在线观看,欧美日韩一区二区三区视频,2021中文字幕在线观看

  • <option id="fbvk0"></option>
    1. <rt id="fbvk0"><tr id="fbvk0"></tr></rt>
      <center id="fbvk0"><optgroup id="fbvk0"></optgroup></center>
      <center id="fbvk0"></center>

      <li id="fbvk0"><abbr id="fbvk0"><dl id="fbvk0"></dl></abbr></li>

      一種前端項(xiàng)目構(gòu)建方法、裝置及系統(tǒng)與流程

      文檔序號:11276077閱讀:297來源:國知局
      一種前端項(xiàng)目構(gòu)建方法、裝置及系統(tǒng)與流程

      本申請屬于計算機(jī)技術(shù)領(lǐng)域,尤其涉及一種前端項(xiàng)目構(gòu)建方法、裝置及系統(tǒng)。



      背景技術(shù):

      前端項(xiàng)目構(gòu)建是前端技術(shù)領(lǐng)域的長久話題。前端項(xiàng)目構(gòu)建,是指將前端項(xiàng)目使用到的所有源文件模塊,合并成一個或幾個文件,方便html頁面直接引用最終代碼。前端項(xiàng)目構(gòu)建工具也隨著前端技術(shù)的高速發(fā)展而快速變化。前端項(xiàng)目構(gòu)建大概經(jīng)歷了以下的幾個階段:

      第一階段,使用代碼壓縮工具對js文件進(jìn)行簡單拼接和壓縮;

      第二階段,使用seajs/requirejs等線上模塊加載工具進(jìn)行模塊化管理;

      第三階段,使用grunt/gulp工具將拼接、壓縮等構(gòu)建過程自動化;

      第四階段,使用webpack工具對模塊進(jìn)行依賴分析,基于模塊依賴構(gòu)建項(xiàng)目。

      現(xiàn)如今,webpack基本代表了主流的前端項(xiàng)目構(gòu)建方案。webpack的興起,源于前端項(xiàng)目模塊化開發(fā)的日趨成熟。代表前端發(fā)展主流的react,angular框架,都需要模塊化開發(fā),通過模塊化來細(xì)化功能和邏輯,使得代碼具有更好的可維護(hù)和可復(fù)用性。

      伴隨模塊化開發(fā)的日趨成熟,前端項(xiàng)目構(gòu)建的另一個趨勢是2次編譯,也就是用非javascript語言編寫軟件,用編譯器轉(zhuǎn)成javascript代碼后在瀏覽器執(zhí)行。例如:react框架推出的是jsx語言,編寫react項(xiàng)目,需要使用babel工具將jsx語言轉(zhuǎn)換成javascript語言;angular框架使用的是typescript語言,需要使用微軟的tsc工具將typescript語言轉(zhuǎn)換成javascript語言。因此,伴隨這個趨勢,就要求前端構(gòu)建工具在將模塊打包的過程中,需要先調(diào)用相應(yīng)的編譯工具把源代碼轉(zhuǎn)成javascript語言后再打包到一塊。對于這個需求,webpac引入了loader(解析器)的概念來處理。

      總的來說,前端項(xiàng)目構(gòu)建技術(shù)的最前沿方向是,將非javascript編寫的項(xiàng)目模塊的源代碼,編譯轉(zhuǎn)換成javascript語言,同時根據(jù)模塊之間的相互依賴關(guān)系,打包和構(gòu)建項(xiàng)目文件。

      圖1是根據(jù)相關(guān)技術(shù)的webpack的前端項(xiàng)目構(gòu)建流程圖,如圖1所示,該流程包括以下步驟(步驟s101-步驟s108):

      步驟s101,維護(hù)一個模塊列表,初始為空。

      步驟s102,取項(xiàng)目的一個入口模塊。

      步驟s103,判斷入口模塊是否在模塊列表中;如果是,則執(zhí)行步驟s105,如果否,則執(zhí)行步驟s104。

      步驟s104,將入口模塊加入模塊列表中,并將其標(biāo)記為待處理模塊。

      步驟s105,從模塊列表里取最早加入的待處理模塊,判斷是否需要進(jìn)行分析;如果是,則執(zhí)行步驟s106,如果否,則執(zhí)行步驟s107。

      步驟s106,對待處理模塊進(jìn)行分析,編譯待處理模塊的javascript代碼。

      步驟s107,分析待處理模塊的依賴關(guān)系,提取出與該待處理模塊有依賴關(guān)系的所有模塊,將這些模塊作為待處理模塊,加入到模塊列表中,并重復(fù)執(zhí)行步驟s105-步驟s107。

      步驟s108,將模塊列表里的所有模塊進(jìn)行合并打包,生成項(xiàng)目構(gòu)建文件。

      上述步驟s107到步驟s108是順序執(zhí)行的過程,未有效使用cpu的并行計算能力,步驟s107中使用了大量同步的同步操作,未有效利用異步,從而造成時間上的等待和浪費(fèi)。

      針對傳統(tǒng)前端項(xiàng)目構(gòu)建技術(shù)的構(gòu)建時間較長的問題,目前尚未提出有效的解決方案。



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

      本申請目的在于提供一種前端項(xiàng)目構(gòu)建方法、裝置及系統(tǒng),可以實(shí)現(xiàn)對商品風(fēng)格類型進(jìn)行自動、準(zhǔn)確的識別,可以提高商品風(fēng)格識別準(zhǔn)確性和效率,降低作業(yè)人員的工作強(qiáng)度。

      本申請?zhí)峁┮环N前端項(xiàng)目構(gòu)建方法、裝置及系統(tǒng)是這樣實(shí)現(xiàn)的:

      一種前端項(xiàng)目構(gòu)建方法,應(yīng)用于調(diào)度器,所述方法包括:獲取前端項(xiàng)目的入口模塊;將所述入口模塊作為當(dāng)前待處理模塊,為其分配一個處理器以執(zhí)行分析處理操作;其中,所述分析處理操作包括:查找與當(dāng)前待處理模塊有依賴關(guān)系的模塊以及反饋當(dāng)前待處理模塊的javascript代碼;將與當(dāng)前待處理模塊有依賴關(guān)系的模塊均作為當(dāng)前待處理模塊,并行執(zhí)行所述分析處理操作;根據(jù)執(zhí)行完成所述分析處理操作的所有模塊的javascript代碼以及所有模塊之間的依賴關(guān)系,生成項(xiàng)目構(gòu)建文件。

      一種前端項(xiàng)目構(gòu)建方法,應(yīng)用于處理器,所述方法包括:接收調(diào)度器的操作指令;其中,所述操作指令中攜帶有待處理模塊的文件路徑;查找與所述待處理模塊有依賴關(guān)系的模塊;將查找結(jié)果和所述待處理模塊的javascript代碼反饋至所述調(diào)度器;其中,所述查找結(jié)果和所述javascript代碼用于生成項(xiàng)目構(gòu)建文件。

      一種前端項(xiàng)目構(gòu)建裝置,應(yīng)用于調(diào)度器,所述裝置包括:模塊獲取單元,用于獲取前端項(xiàng)目的入口模塊;分配單元,用于將所述入口模塊作為當(dāng)前待處理模塊,為其分配一個處理器以執(zhí)行分析處理操作;其中,所述分析處理操作包括:查找與當(dāng)前待處理模塊有依賴關(guān)系的模塊以及反饋當(dāng)前待處理模塊的javascript代碼;將與當(dāng)前待處理模塊有依賴關(guān)系的模塊均 作為當(dāng)前待處理模塊,并行執(zhí)行所述分析處理操作;文件生成單元,用于根據(jù)執(zhí)行完成所述分析處理操作的所有模塊的javascript代碼以及所有模塊之間的依賴關(guān)系,生成項(xiàng)目構(gòu)建文件。

      一種前端項(xiàng)目構(gòu)建裝置,應(yīng)用于處理器,所述裝置包括:指令接收單元,用于接收調(diào)度器的操作指令;其中,所述操作指令中攜帶有待處理模塊的文件路徑;處理單元,用于查找與所述待處理模塊有依賴關(guān)系的模塊;反饋單元,用于將查找結(jié)果和所述待處理模塊的javascript代碼反饋至所述調(diào)度器;其中,所述查找結(jié)果和所述javascript代碼用于生成項(xiàng)目構(gòu)建文件。

      一種前端項(xiàng)目構(gòu)建系統(tǒng),所述系統(tǒng)包括:上述的應(yīng)用于調(diào)度器的前端項(xiàng)目構(gòu)建裝置,以及上述的應(yīng)用于處理器的前端項(xiàng)目構(gòu)建裝置;其中,所述調(diào)度器與多個所述處理器之間通過異步消息進(jìn)行交互。

      本申請?zhí)峁┑那岸隧?xiàng)目構(gòu)建方法、裝置及系統(tǒng),利用cpu(centralprocessingunit,中央處理器)的并行計算能力,調(diào)度器調(diào)度多個處理器并行查找模塊依賴關(guān)系以及編譯javascript代碼,大大節(jié)省了時間。并且,調(diào)度器與處理器之間通過異步消息通訊,避免了消息等待過程。利用本申請實(shí)施方案,大大縮短了前端項(xiàng)目構(gòu)建時間,提高了前端項(xiàng)目構(gòu)建效率。

      附圖說明

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

      圖1是根據(jù)相關(guān)技術(shù)的webpack的前端項(xiàng)目構(gòu)建流程圖;

      圖2是本申請?zhí)岢龅那岸隧?xiàng)目構(gòu)建方法的一種實(shí)施例的方法流程圖;

      圖3是本申請?zhí)岢龅那岸隧?xiàng)目構(gòu)建方法的一種實(shí)施例的方法流程圖;

      圖4是本申請?zhí)岢龅恼{(diào)度器與處理器的體系架構(gòu)圖;

      圖5是本申請?zhí)岢龅恼{(diào)度器側(cè)的前端項(xiàng)目構(gòu)建方法的優(yōu)選實(shí)施例的方法流程圖;

      圖6是本申請?zhí)岢龅奶幚砥鱾?cè)的前端項(xiàng)目構(gòu)建方法的優(yōu)選實(shí)施例的方法流程圖;

      圖7是本申請所述前端項(xiàng)目構(gòu)建裝置一種實(shí)施例的結(jié)構(gòu)示意圖;

      圖8是本申請所述前端項(xiàng)目構(gòu)建裝置一種實(shí)施例的結(jié)構(gòu)示意圖;

      圖9是本申請所述處理單元一種實(shí)施例的結(jié)構(gòu)示意圖;

      圖10是本申請所述反饋單元一種實(shí)施例的結(jié)構(gòu)示意圖;

      圖11是本申請所述前端項(xiàng)目構(gòu)建系統(tǒng)一種實(shí)施例的結(jié)構(gòu)示意圖。

      具體實(shí)施方式

      為了使本技術(shù)領(lǐng)域的人員更好地理解本申請中的技術(shù)方案,下面將結(jié)合本申請實(shí)施例中的附圖,對本申請實(shí)施例中的技術(shù)方案進(jìn)行清楚、完整地描述,顯然,所描述的實(shí)施例僅僅是本申請一部分實(shí)施例,而不是全部的實(shí)施例?;诒旧暾堉械膶?shí)施例,本領(lǐng)域普通技術(shù)人員在沒有作出創(chuàng)造性勞動前提下所獲得的所有其他實(shí)施例,都應(yīng)當(dāng)屬于本申請保護(hù)的范圍。

      下面結(jié)合附圖對本申請所述的前端項(xiàng)目構(gòu)建方法、裝置及系統(tǒng)進(jìn)行詳細(xì)的說明。雖然本申請?zhí)峁┝巳缦率鰧?shí)施例或附圖所示的方法操作步驟或裝置結(jié)構(gòu),但基于常規(guī)或者無需創(chuàng)造性的勞動在所述方法或裝置中可以包括更多或者更少的操作步驟或模塊結(jié)構(gòu)。在邏輯性上不存在必要因果關(guān)系的步驟或結(jié)構(gòu)中,這些步驟的執(zhí)行順序或裝置的模塊結(jié)構(gòu)不限于本申請實(shí)施例提供的執(zhí)行順序或模塊結(jié)構(gòu)。所述的方法或模塊結(jié)構(gòu)的在實(shí)際中的裝置或終端產(chǎn)品執(zhí)行時,可以按照實(shí)施例或者附圖所示的方法或模塊結(jié)構(gòu)連接進(jìn)行順序執(zhí)行或者并行執(zhí)行(例如并行處理器或者多線程處理的環(huán)境)。

      圖2是本申請?zhí)岢龅那岸隧?xiàng)目構(gòu)建方法的一種實(shí)施例的方法流程圖,該方法應(yīng)用于調(diào)度器,如圖2所示,本申請?zhí)峁┑那岸隧?xiàng)目構(gòu)建方法的一種實(shí)施例可以包括:

      步驟s201,調(diào)度器獲取前端項(xiàng)目的入口模塊。一般情況下,一個前端項(xiàng)目具有多個入口,一個入口對應(yīng)一個入口模塊。在實(shí)際操作中,可基于前端項(xiàng)目的構(gòu)建需求選擇對哪一個入口模塊進(jìn)行后續(xù)的分析處理操作。

      步驟s202,調(diào)度器將入口模塊作為當(dāng)前待處理模塊,為其分配一個處理器以執(zhí)行分析處理操作。上述分析處理操作至少可以包括:查找與當(dāng)前待處理模塊有依賴關(guān)系的模塊以及反饋當(dāng)前待處理模塊的javascript代碼。

      之后,調(diào)度器將與當(dāng)前待處理模塊有依賴關(guān)系的模塊均作為當(dāng)前待處理模塊,利用cpu的多核并行處理能力,并行執(zhí)行上述分析處理操作。重復(fù)執(zhí)行該步驟,直至不再存在具備依賴關(guān)系的模塊為止。

      步驟s203,調(diào)度器根據(jù)執(zhí)行完成上述分析處理操作的所有模塊的javascript代碼以及所有模塊之間的依賴關(guān)系,生成項(xiàng)目構(gòu)建文件。

      本實(shí)施例提供的前端項(xiàng)目構(gòu)建方法,利用cpu的并行計算能力,對待處理模塊并行執(zhí)行分析處理操作,大大節(jié)省了時間。并且,調(diào)度器與處理器之間通過異步消息通訊,避免了消息等待過程。從而大大縮短了前端項(xiàng)目構(gòu)建時間,提高了前端項(xiàng)目構(gòu)建效率。

      為了更好的管理待處理模塊,可以建立一個初始為空的模塊列表,將入口模塊放入模塊 列表中,此時入口模塊的狀態(tài)是待處理狀態(tài)。還可以建立一個包含有多個處理器的處理器列表,處理器的狀態(tài)初始均設(shè)置為空閑狀態(tài)。為了更好的利用cpu的多核并行處理能力,處理器的個數(shù)可以設(shè)置為與cpu的核數(shù)相等。

      在此之后,為入口模塊分配一個空閑狀態(tài)的處理器,該處理器對入口模塊執(zhí)行下述分析處理操作:查找與入口模塊有依賴關(guān)系的模塊,并反饋入口模塊的javascript代碼。在該分析處理操作過程中,處理器的狀態(tài)設(shè)置為忙碌狀態(tài),一旦處理器查找到與入口模塊有依賴關(guān)系的一個模塊,便立即將其放入模塊列表中,并設(shè)置為待處理狀態(tài)。然后繼續(xù)查找,直至與入口模塊有依賴關(guān)系的模塊全部查找到。此時,該分析處理操作結(jié)束,處理器向調(diào)度器反饋入口模塊的javascript代碼,處理器的狀態(tài)恢復(fù)為空閑狀態(tài)。

      之后,將與入口模塊有依賴關(guān)系的模塊標(biāo)識為待處理模塊,假設(shè)與入口模塊有依賴關(guān)系的模塊有a模塊、b模塊和c模塊,則依次為待處理模塊(a模塊、b模塊或者c模塊)分配處理器,處理器查找與待處理模塊(a模塊、b模塊或者c模塊)有依賴關(guān)系的模塊,并反饋待處理模塊(a模塊、b模塊或者c模塊)的javascript代碼。假設(shè)與a模塊有依賴關(guān)系的模塊有兩個,分別為a1模塊和a2模塊,則將a1模塊和a2模塊標(biāo)識為待處理模塊,依次為a1模塊或a2模塊分配處理器,處理器查找與待處理模塊(a1模塊或a2模塊)有依賴關(guān)系的模塊,并反饋待處理模塊(a1模塊或者a2模塊)的javascript代碼。如此循環(huán),直至查找完所有依賴關(guān)系。b模塊和c模塊同樣如此,在此不再重復(fù)說明。a模塊、b模塊和c模塊的分析處理操作過程可并行處理,以縮短分析處理時長。

      與此同時,模塊列表中只要有處于待處理狀態(tài)的模塊(稱為待處理模塊),便從模塊列表中依次調(diào)出待處理模塊,為其分配空閑狀態(tài)的處理器,如果此時所有處理器均處于忙碌狀態(tài),則等待,直至出現(xiàn)空閑狀態(tài)的處理器。為了更好的管理模塊列表,可以遵循先進(jìn)先出的原則,先調(diào)出最早放入的待處理模塊,為其分配處理器。多個處理器對多個待處理模塊的分析處理操作可并行進(jìn)行,從而節(jié)約前端項(xiàng)目構(gòu)建時間。

      下面針對處理器對模塊的分析處理操作進(jìn)行詳細(xì)介紹。圖3是本申請?zhí)岢龅那岸隧?xiàng)目構(gòu)建方法的一種實(shí)施例的方法流程圖,該方法應(yīng)用于處理器,如圖3所示,本申請?zhí)峁┑那岸隧?xiàng)目構(gòu)建方法的一種實(shí)施例可以包括:

      步驟s301,接收調(diào)度器的操作指令,該操作指令中攜帶有待處理模塊的文件路徑。處理器可基于文件路徑準(zhǔn)確找到待處理模塊。

      步驟s302,查找與待處理模塊有依賴關(guān)系的模塊。

      步驟s303,將查找結(jié)果和待處理模塊的javascript代碼反饋至調(diào)度器。調(diào)度器可根據(jù)該 查找結(jié)果和javascript代碼生成項(xiàng)目構(gòu)建文件。

      本實(shí)施例提供的前端項(xiàng)目構(gòu)建方法,調(diào)度器與處理器之間通過異步消息通訊,避免了消息等待過程。從而大大縮短了前端項(xiàng)目構(gòu)建時間,提高了前端項(xiàng)目構(gòu)建效率。

      由于每個模塊的文件類型可能并不相同,因此處理器需要根據(jù)待處理模塊的文件類型,調(diào)用對應(yīng)類型的解析器對模塊文件進(jìn)行解析,以查找與待處理模塊有依賴關(guān)系的模塊。

      模塊的文件類型至少有以下三種:js后綴名文件、jsx后綴名文件、ts后綴名文件。如果待處理模塊的文件類型是js后綴名文件,則確定對應(yīng)的解析器為js解析器,由于該類型模塊已經(jīng)有javascript代碼,因此不需要再進(jìn)行代碼解析。如果待處理模塊的文件類型是jsx后綴名文件,則確定對應(yīng)的解析器為jsx解析器,并編譯得到待處理模塊的javascript代碼;如果待處理模塊的文件類型是ts后綴名文件,則確定對應(yīng)的解析器為ts解析器,并編譯得到待處理模塊的javascript代碼。

      在解析器對待處理模塊的文件進(jìn)行解析時,是將文件分割為多塊,依次分析每一塊文件內(nèi)容,從而查找與待處理模塊有依賴關(guān)系的模塊。每查找到一個與待處理模塊有依賴關(guān)系的模塊,便即時通知處理器,以便處理器通過發(fā)現(xiàn)依賴消息(found_dependency)反饋給調(diào)度器,直至所有文件內(nèi)容全部解析完成。與此同時,對需要進(jìn)行代碼編譯的待處理模塊進(jìn)行編譯,將待處理模塊的javascript代碼反饋至處理器,以便處理器通過分析結(jié)束消息(analysis_finish)反饋給調(diào)度器。基于此,解析器對待處理模塊的文件進(jìn)行解析后,既查找到與待處理模塊有依賴關(guān)系的所有模塊,又得到待處理模塊的javascript代碼,將查找結(jié)果與javascript代碼都反饋給處理器,簡化了處理流程,節(jié)省了時間。

      本申請是一個分布式的并行處理方案,主要通過調(diào)度器(dispatcher)和處理器(worker)來實(shí)現(xiàn)。圖4是本申請?zhí)岢龅恼{(diào)度器與處理器的體系架構(gòu)圖,如圖4所示,一個調(diào)度器連接多個處理器,調(diào)度器與處理器之間通過異步消息進(jìn)行交互。為了充分利用cpu的并行處理能力,處理器的個數(shù)可以設(shè)置為與cpu的核數(shù)相等。

      下面通過優(yōu)選實(shí)施例和附圖對本申請的技術(shù)方案進(jìn)一步詳細(xì)介紹。

      圖5是本申請?zhí)岢龅恼{(diào)度器側(cè)的前端項(xiàng)目構(gòu)建方法的優(yōu)選實(shí)施例的方法流程圖,如圖5所示,可以包括以下步驟:

      步驟s501,調(diào)度器維護(hù)一個模塊列表,初始為空。

      步驟s502,調(diào)度器維護(hù)一個處理器(worker)列表,worker的初始數(shù)量可以設(shè)置為與cpu核數(shù)相等,以充分利用cpu的多核并行處理能力。處理器列表中的所有worker均標(biāo)記為空閑(avaliable)狀態(tài)。

      步驟s503,調(diào)度器獲取項(xiàng)目的一個入口模塊。一個項(xiàng)目一般有多個入口,每個入口對應(yīng)一個入口模塊。

      步驟s504,調(diào)度器將上述入口模塊添加到模塊列表中,并將其標(biāo)記為待處理模塊。

      步驟s505,調(diào)度器為待處理模塊分配avaliable狀態(tài)的worker。具體包括以下步驟:

      步驟s505a,調(diào)度器判斷模塊列表中是否還有待處理模塊;如果有,則執(zhí)行步驟s505b,如果沒有,則執(zhí)行步驟s506。

      步驟s505b,調(diào)度器從模塊列表中取一個最早添加的待處理模塊。

      步驟s505c,調(diào)度器判斷處理器列表中是否還有avaliable狀態(tài)的worker;如果有,則執(zhí)行步驟s505d,如果沒有,則執(zhí)行步驟s506。

      步驟s505d,調(diào)度器從處理器列表中取一個avaliable狀態(tài)的worker。

      步驟s505e,調(diào)度器將步驟s505b中的待處理模塊分配給步驟s505d中的worker進(jìn)行分析處理操作。同時,將該待處理模塊標(biāo)記為“正在處理”狀態(tài),將該worker標(biāo)記為忙碌(busy)狀態(tài)。

      步驟s506,調(diào)度器判斷模塊列表里的所有模塊是否都是已處理狀態(tài);如果是,則執(zhí)行步驟s508,如果否,則執(zhí)行步驟s507。

      步驟s507,調(diào)度器等待worker的消息。這是一個異步的過程,調(diào)度器可能收到的消息包括:

      1)found_dependency(發(fā)現(xiàn)依賴消息)

      worker在對待處理模塊進(jìn)行分析處理操作的過程中,會查找到與該模塊依賴的其它模塊。worker不會在查找到所有有依賴關(guān)系的模塊后再傳遞給調(diào)度器,而是一旦查找到一個有依賴關(guān)系的模塊,就立即通過found_dependency消息告知調(diào)度器。調(diào)度器會將查找到的這個模塊放入模塊列表中,然后執(zhí)行步驟s505。

      2)analysis_finish(分析結(jié)束消息)

      worker在分析處理操作結(jié)束后,會通過analysis_finish告知調(diào)度器待處理模塊分析結(jié)束,同時返回待處理模塊的javascript代碼。調(diào)度器會把該模塊標(biāo)記為“已處理”,把該worker標(biāo)記為avaliable。然后執(zhí)行步驟s508。

      步驟s508,將模塊列表里的所有模塊進(jìn)行打包,根據(jù)模塊之間的依賴關(guān)系以及所有模塊的javascript代碼,生成項(xiàng)目構(gòu)建文件。

      在本實(shí)施例中,調(diào)度器與處理器之間通過異步消息通訊,并且充分利用cpu的多核處理能力,從而大大提高前端項(xiàng)目構(gòu)建效率。

      圖6是本申請?zhí)岢龅奶幚砥鱾?cè)的前端項(xiàng)目構(gòu)建方法的優(yōu)選實(shí)施例的方法流程圖,如圖6所示,可以包括以下步驟:

      步驟s601,處理器自身狀態(tài)標(biāo)記為avaliable。處理器初始化不同文件類型的解析器(loader),至少包括:javascript解析器(jsloader)、jsx解析器(jsxloader)、typescript(tsloader)解析器。

      步驟s602,等待調(diào)度器(dispatcher)的消息,這是一個異步的過程,可能收到的消息包括:analysis_module,該消息會通知處理器有一個待處理模塊需要進(jìn)行分析處理,同時會把待處理模塊的文件路徑傳遞過來。worker通過文件路線確定該待處理模塊,之后worker標(biāo)記自身狀態(tài)為busy。

      步驟s603,處理器讀取待處理模塊的文件內(nèi)容,判斷待處理模塊的文件需要哪種解析器進(jìn)行處理。

      如果待處理模塊是js后綴名文件,則執(zhí)行步驟s604a。

      如果待處理模塊是jsx后綴名文件,則執(zhí)行步驟s604b。

      如果待處理模塊是ts后綴名文件,則執(zhí)行步驟s604c。

      步驟s604,調(diào)取解析器對待處理模塊進(jìn)行分析處理。具體地:

      步驟s604a,將模塊文件分為多塊內(nèi)容,js解析器依次分析每一塊內(nèi)容,如果查找到與待處理模塊有依賴關(guān)系的模塊,則執(zhí)行步驟s605。然后繼續(xù)查找,直至查找到與待處理模塊有依賴關(guān)系的所有模塊。在js解析器分析到文件尾后,執(zhí)行步驟s606。

      步驟s604b,將模塊文件分為多塊內(nèi)容,jsx解析器依次分析每一塊內(nèi)容,如果查找到與待處理模塊有依賴關(guān)系的模塊,則執(zhí)行步驟s605。然后繼續(xù)查找,直至查找到與待處理模塊有依賴關(guān)系的所有模塊。同時,jsx解析器將模塊文件的jsx語言轉(zhuǎn)換成javascript語言,從而編譯得到待處理模塊的javascript代碼。在jsx解析器分析到文件尾后,執(zhí)行步驟s606。

      步驟s604c,將模塊文件分為多塊內(nèi)容,ts解析器依次分析每一塊內(nèi)容,如果查找到與待處理模塊有依賴關(guān)系的模塊,則執(zhí)行步驟s605。然后繼續(xù)查找,直至查找到與待處理模塊有依賴關(guān)系的所有模塊。同時,ts解析器將模塊文件的ts語言轉(zhuǎn)換成javascript語言,從而編譯得到待處理模塊的javascript代碼。在ts解析器分析到文件尾后,執(zhí)行步驟s606。

      步驟s605,處理器將查找到的與待處理模塊有依賴關(guān)系的模塊,通過found_dependency消息傳遞給調(diào)度器。

      步驟s606,處理器傳遞analysis_finish消息給調(diào)度器,同時將待處理模塊的javascript代碼也一并傳遞。處理器將自身狀態(tài)設(shè)置為avaliable。

      在本實(shí)施例中,處理器調(diào)用解析器對待處理模塊進(jìn)行分析處理,可以在查找與待處理模 塊有依賴關(guān)系的模塊的同時,獲取到待處理模塊的javascript代碼。處理器將查找結(jié)果與javascript代碼均反饋至調(diào)度器,以利于調(diào)度器據(jù)此生成項(xiàng)目構(gòu)建文件。從而有效縮短了操作流程,節(jié)省了前端項(xiàng)目構(gòu)建時間。

      基于與上述前端項(xiàng)目構(gòu)建方法相同的發(fā)明構(gòu)思,本申請?zhí)峁┮环N前端項(xiàng)目構(gòu)建裝置,應(yīng)用于調(diào)度器,如下面實(shí)施例所述。由于該前端項(xiàng)目構(gòu)建裝置解決問題的原理與前端項(xiàng)目構(gòu)建方法相似,因此該前端項(xiàng)目構(gòu)建裝置的實(shí)施可以參見前端項(xiàng)目構(gòu)建方法的實(shí)施,重復(fù)之處不再贅述。

      圖7是本申請所述前端項(xiàng)目構(gòu)建裝置一種實(shí)施例的結(jié)構(gòu)示意圖,如圖7所示,所述裝置可以包括:

      模塊獲取單元10,用于獲取前端項(xiàng)目的入口模塊。模塊獲取單元10是前端項(xiàng)目構(gòu)建裝置中獲取前端項(xiàng)目的入口模塊的部分,可以是軟件、硬件或二者的結(jié)合,例如可以是完成前端項(xiàng)目的入口模塊獲取功能的接口、處理芯片等元器件。

      分配單元12,連接至模塊獲取單元10,用于將入口模塊作為當(dāng)前待處理模塊,為其分配一個處理器以執(zhí)行分析處理操作;其中,上述分析處理操作包括:查找與當(dāng)前待處理模塊有依賴關(guān)系的模塊以及反饋當(dāng)前待處理模塊的javascript代碼;將與當(dāng)前待處理模塊有依賴關(guān)系的模塊均作為當(dāng)前待處理模塊,并行執(zhí)行上述分析處理操作。分配單元12是前端項(xiàng)目構(gòu)建裝置中為模塊分配處理器的部分,可以是軟件、硬件或二者的結(jié)合,例如可以是完成處理器分配功能的接口、處理芯片等元器件。

      文件生成單元14,連接至分配單元12,用于根據(jù)執(zhí)行完成上述分析處理操作的所有模塊的javascript代碼以及所有模塊之間的依賴關(guān)系,生成項(xiàng)目構(gòu)建文件。文件生成單元30是前端項(xiàng)目構(gòu)建裝置中生成項(xiàng)目構(gòu)建文件的部分,可以是軟件、硬件或二者的結(jié)合,例如可以是完成文件打包構(gòu)建功能的接口、處理芯片等元器件。

      本實(shí)施例提供的前端項(xiàng)目構(gòu)建裝置,利用cpu的并行計算能力,大大節(jié)省了時間。調(diào)度器與處理器之間通過異步消息通訊,避免了消息等待過程。從而大大縮短了前端項(xiàng)目構(gòu)建時間,提高了前端項(xiàng)目構(gòu)建效率。

      為了更好的管理待處理模塊,本實(shí)施例提供了一種優(yōu)選實(shí)施方式,即上述裝置還可以包括:模塊列表建立單元,用于建立初始為空的模塊列表,將入口模塊放入模塊列表中。處理器列表建立單元,用于建立處理器列表;其中,處理器列表中的處理器狀態(tài)初始為空閑狀態(tài),處理器的個數(shù)與cpu的核數(shù)相等。

      上述裝置還可以包括:狀態(tài)設(shè)置單元,用于將執(zhí)行分析處理操作的處理器的狀態(tài)設(shè)置為 忙碌狀態(tài);將執(zhí)行完成分析處理操作的處理器的狀態(tài)設(shè)置為空閑狀態(tài)。從而準(zhǔn)確掌握處理器的狀態(tài),便于分配單元12的分配工作的準(zhǔn)確性和時效性。

      基于與上述前端項(xiàng)目構(gòu)建方法相同的發(fā)明構(gòu)思,本申請?zhí)峁┮环N前端項(xiàng)目構(gòu)建裝置,應(yīng)用于處理器,如下面實(shí)施例所述。由于該前端項(xiàng)目構(gòu)建裝置解決問題的原理與前端項(xiàng)目構(gòu)建方法相似,因此該前端項(xiàng)目構(gòu)建裝置的實(shí)施可以參見前端項(xiàng)目構(gòu)建方法的實(shí)施,重復(fù)之處不再贅述。

      圖8是本申請所述前端項(xiàng)目構(gòu)建裝置一種實(shí)施例的結(jié)構(gòu)示意圖,如圖8所示,所述裝置可以包括:

      指令接收單元20,用于接收調(diào)度器的操作指令;其中,上述操作指令中攜帶有待處理模塊的文件路徑;指令接收單元20是前端項(xiàng)目構(gòu)建裝置中接收調(diào)度器的操作指令的部分,可以是軟件、硬件或二者的結(jié)合,例如可以是完成指令接收功能的接口、處理芯片等元器件。

      處理單元22,連接至指令接收單元20,用于查找與上述待處理模塊有依賴關(guān)系的模塊;處理單元22是前端項(xiàng)目構(gòu)建裝置中查找依賴關(guān)系的部分,可以是軟件、硬件或二者的結(jié)合,例如可以是完成查找功能的接口、處理芯片等元器件。

      反饋單元24,連接至處理單元22,用于將查找結(jié)果和上述待處理模塊的javascript代碼反饋至上述調(diào)度器;其中,上述查找結(jié)果和上述javascript代碼用于生成項(xiàng)目構(gòu)建文件;反饋單元24是前端項(xiàng)目構(gòu)建裝置中查找結(jié)果和javascript代碼反饋的部分,可以是軟件、硬件或二者的結(jié)合,例如可以是完成信息反饋功能的接口、處理芯片等元器件。

      本實(shí)施例提供的前端項(xiàng)目構(gòu)建裝置,利用cpu的并行計算能力,對待處理模塊并行執(zhí)行分析處理操作,大大節(jié)省了時間。調(diào)度器與處理器之間通過異步消息通訊,避免了消息等待過程。從而大大縮短了前端項(xiàng)目構(gòu)建時間,提高了前端項(xiàng)目構(gòu)建效率。

      由于每個模塊的文件類型可能并不相同,因此處理器需要根據(jù)待處理模塊的文件類型,調(diào)用對應(yīng)類型的解析器對模塊文件進(jìn)行解析,以查找與待處理模塊有依賴關(guān)系的模塊?;诖?,本實(shí)施例提供了一種優(yōu)選實(shí)施方式,圖9是本申請所述處理單元一種實(shí)施例的結(jié)構(gòu)示意圖,如圖9所示,上述處理單元22可以包括:類型確定模塊220,用于確定與上述待處理模塊的文件類型相對應(yīng)的解析器;調(diào)用模塊222,連接至類型確定模塊220,用于調(diào)用上述解析器對上述待處理模塊的文件進(jìn)行分析,以查找與上述待處理模塊有依賴關(guān)系的模塊。

      上述類型確定模塊可以包括:第一子模塊,用于在上述待處理模塊的文件類型是js后綴名文件的情況下,確定對應(yīng)的解析器為js解析器;或者,第二子模塊,用于在上述待處理模塊的文件類型是jsx后綴名文件的情況下,確定對應(yīng)的解析器為jsx解析器,并編譯得到上 述待處理模塊的javascript代碼;或者,第三子模塊,用于在上述待處理模塊的文件類型是ts后綴名文件的情況下,確定對應(yīng)的解析器為ts解析器,并編譯得到上述待處理模塊的javascript代碼。

      圖10是本申請所述反饋單元一種實(shí)施例的結(jié)構(gòu)示意圖,如圖10所示,上述反饋單元24可以包括:第一反饋模塊240,用于在查找到與上述待處理模塊有依賴關(guān)系的模塊之后,即時通過發(fā)現(xiàn)依賴消息向上述調(diào)度器反饋當(dāng)前查找結(jié)果,直至查找到與上述待處理模塊有依賴關(guān)系的所有模塊;第二反饋模塊242,連接至第一反饋模塊240,用于將上述待處理模塊的javascript代碼通過分析結(jié)束消息反饋至上述調(diào)度器。基于此,處理器在向調(diào)度器反饋查找到的與待處理模塊有依賴關(guān)系的所有模塊的同時,又向調(diào)度器反饋待處理模塊的javascript代碼,簡化了處理流程,節(jié)省了時間。

      基于與上述前端項(xiàng)目構(gòu)建裝置相同的發(fā)明構(gòu)思,本申請?zhí)峁┮环N前端項(xiàng)目構(gòu)建系統(tǒng)。圖11是本申請所述前端項(xiàng)目構(gòu)建系統(tǒng)一種實(shí)施例的結(jié)構(gòu)示意圖,如圖11所示,所述系統(tǒng)可以包括:應(yīng)用于調(diào)度器的前端項(xiàng)目構(gòu)建裝置,以及應(yīng)用于處理器的前端項(xiàng)目構(gòu)建裝置。其中,調(diào)度器與多個處理器之間通過異步消息進(jìn)行交互。從而節(jié)省處理時間,提高前端項(xiàng)目構(gòu)建效率。

      本申請可以依托于nodejs平臺來實(shí)現(xiàn),跟現(xiàn)有方案相比,本申請技術(shù)方案在保持webpack功能的同時,極大地提高構(gòu)建過程的速度。

      雖然本申請?zhí)峁┝巳鐚?shí)施例或流程圖所述的方法操作步驟,但基于常規(guī)或者無創(chuàng)造性的勞動可以包括更多或者更少的操作步驟。實(shí)施例中列舉的步驟順序僅僅為眾多步驟執(zhí)行順序中的一種方式,不代表唯一的執(zhí)行順序。在實(shí)際中的裝置或客戶端產(chǎn)品執(zhí)行時,可以按照實(shí)施例或者附圖所示的方法順序執(zhí)行或者并行執(zhí)行(例如并行處理器或者多線程處理的環(huán)境)。

      上述實(shí)施例闡明的裝置或模塊,具體可以由計算機(jī)芯片或?qū)嶓w實(shí)現(xiàn),或者由具有某種功能的產(chǎn)品來實(shí)現(xiàn)。為了描述的方便,描述以上裝置時以功能分為各種模塊分別描述。在實(shí)施本申請時可以把各模塊的功能在同一個或多個軟件和/或硬件中實(shí)現(xiàn)。當(dāng)然,也可以將實(shí)現(xiàn)某功能的模塊由多個子模塊或子單元組合實(shí)現(xiàn)。

      本申請中所述的方法、裝置或模塊可以以計算機(jī)可讀程序代碼方式實(shí)現(xiàn)控制器按任何適當(dāng)?shù)姆绞綄?shí)現(xiàn),例如,控制器可以采取例如微處理器或處理器以及存儲可由該(微)處理器執(zhí)行的計算機(jī)可讀程序代碼(例如軟件或固件)的計算機(jī)可讀介質(zhì)、邏輯門、開關(guān)、專用集成電路(applicationspecificintegratedcircuit,asic)、可編程邏輯控制器和嵌入微控制器的形式,控制器的例子包括但不限于以下微控制器:arc625d、atmelat91sam、microchip pic18f26k20以及siliconelabsc8051f320,存儲器控制器還可以被實(shí)現(xiàn)為存儲器的控制邏輯的一部分。本領(lǐng)域技術(shù)人員也知道,除了以純計算機(jī)可讀程序代碼方式實(shí)現(xiàn)控制器以外,完全可以通過將方法步驟進(jìn)行邏輯編程來使得控制器以邏輯門、開關(guān)、專用集成電路、可編程邏輯控制器和嵌入微控制器等的形式來實(shí)現(xiàn)相同功能。因此這種控制器可以被認(rèn)為是一種硬件部件,而對其內(nèi)部包括的用于實(shí)現(xiàn)各種功能的裝置也可以視為硬件部件內(nèi)的結(jié)構(gòu)?;蛘呱踔粒梢詫⒂糜趯?shí)現(xiàn)各種功能的裝置視為既可以是實(shí)現(xiàn)方法的軟件模塊又可以是硬件部件內(nèi)的結(jié)構(gòu)。

      本申請所述裝置中的部分模塊可以在由計算機(jī)執(zhí)行的計算機(jī)可執(zhí)行指令的一般上下文中描述,例如程序模塊。一般地,程序模塊包括執(zhí)行特定任務(wù)或?qū)崿F(xiàn)特定抽象數(shù)據(jù)類型的例程、程序、對象、組件、數(shù)據(jù)結(jié)構(gòu)、類等等。也可以在分布式計算環(huán)境中實(shí)踐本申請,在這些分布式計算環(huán)境中,由通過通信網(wǎng)絡(luò)而被連接的遠(yuǎn)程處理設(shè)備來執(zhí)行任務(wù)。在分布式計算環(huán)境中,程序模塊可以位于包括存儲設(shè)備在內(nèi)的本地和遠(yuǎn)程計算機(jī)存儲介質(zhì)中。

      通過以上的實(shí)施方式的描述可知,本領(lǐng)域的技術(shù)人員可以清楚地了解到本申請可借助軟件加必需的硬件的方式來實(shí)現(xiàn)?;谶@樣的理解,本申請的技術(shù)方案本質(zhì)上或者說對現(xiàn)有技術(shù)做出貢獻(xiàn)的部分可以以軟件產(chǎn)品的形式體現(xiàn)出來,也可以通過數(shù)據(jù)遷移的實(shí)施過程中體現(xiàn)出來。該計算機(jī)軟件產(chǎn)品可以存儲在存儲介質(zhì)中,如rom/ram、磁碟、光盤等,包括若干指令用以使得一臺計算機(jī)設(shè)備(可以是個人計算機(jī),移動終端,服務(wù)器,或者網(wǎng)絡(luò)設(shè)備等)執(zhí)行本申請各個實(shí)施例或者實(shí)施例的某些部分所述的方法。

      本說明書中的各個實(shí)施例采用遞進(jìn)的方式描述,各個實(shí)施例之間相同或相似的部分互相參見即可,每個實(shí)施例重點(diǎn)說明的都是與其他實(shí)施例的不同之處。本申請的全部或者部分可用于眾多通用或?qū)S玫挠嬎銠C(jī)系統(tǒng)環(huán)境或配置中。例如:個人計算機(jī)、服務(wù)器計算機(jī)、手持設(shè)備或便攜式設(shè)備、平板型設(shè)備、移動通信終端、多處理器系統(tǒng)、基于微處理器的系統(tǒng)、可編程的電子設(shè)備、網(wǎng)絡(luò)pc、小型計算機(jī)、大型計算機(jī)、包括以上任何系統(tǒng)或設(shè)備的分布式計算環(huán)境等等。

      雖然通過實(shí)施例描繪了本申請,本領(lǐng)域普通技術(shù)人員知道,本申請有許多變形和變化而不脫離本申請的精神,希望所附的權(quán)利要求包括這些變形和變化而不脫離本申請的精神。

      當(dāng)前第1頁1 2 
      網(wǎng)友詢問留言 已有0條留言
      • 還沒有人留言評論。精彩留言會獲得點(diǎn)贊!
      1