fis的實現原理和提供的三種能力

2021-09-02 11:09:09 字數 2717 閱讀 8638

[size=large][b]fis原理[/b][/size]

fis編譯過程:單檔案編譯和打包兩個階段

[img]

1,單檔案編譯

parser:將其他語言編譯為標準js、css,比如將前端模板、coffee-script編譯為js,將less、sass編譯為css。

preprocessor:在fis進行標準化處理之前進行某些修改,比如 支援image-set語法的預處理外掛程式

standard:前面兩項處理會將檔案處理為標準的js、css、html語法,fis核心的標準化處理過程對這些語言進行 三種語言能力 擴充套件處理。這也就意味著,使用less、coffee等語法在fis系統中一樣具備 資源定位、內容嵌入,依賴宣告 的能力。該過程 不可擴充套件。

postprocessor:對檔案進行標準化之後的處理,比如利用依賴宣告能力實現的 js包裝器外掛程式,可以獲取js檔案的依賴關係,並新增define包裝。

lint

test

optimize:**優化階段,使用 fis release命令的 --optimize 引數會呼叫該過程。fis內建的fis-optimizer-uglify-js外掛程式和fis-optimizer-clean-css外掛程式都是這類擴充套件。

2,打包過程

而fis的打包概念實際上是 資源備份。fis在打包期間最重要的生成物是 map.json,當使用fis release命令新增 --pack 引數時,會觸發打包過程,此時,會根據fis-conf.js中的 pack節點配置將檔案進行合併,然後把合併後的打包檔案相關資訊記錄到map.json中,並生成相應檔案。所以fis的打包結果並 不會再嵌入到某個檔案內,而是利用map.json中的資料進行執行時打包資訊查詢。

fis系統的打包過程提供了4個可擴充套件的處理過程,它們是:

1. prepackager(打包預處理器):在打包前進行資源預處理。

2. packager(打包處理器):對資源進行打包。預設的打包器就是收集資源表,建立map.json的過程

3. spriter(csssprite處理器):對css進行sprites化處理

4. postpackager(打包後處理器):打包之後對檔案進行處理,通常用來將map.json轉換成其他語言的檔案,比如php

[size=large][b]fis三種能力[/b][/size]

一、資源定位 可以有效的分離開發路徑與部署路徑之間的關係

在html中,html中有標籤,有

在js中,分析js檔案html的script標籤內容。使用編譯函式__uri(path)來定位資源

在css中,識別css檔案或html的style標籤內容 url(path) 以及 src=path

配置位置:

fis.config.merge(

});二、嵌入資源 提供諸如base64嵌入到css、js裡,前端模板編譯到js檔案中,將js、css、html拆分成幾個檔案最後合併到一起的能力。

1,在html嵌入base64,css檔案,js檔案,xx.html檔案。字尾都加 ?__inline

2,在js中切入js檔案(__inline('demo.js')),嵌入(__inline('images/logo.gif')),嵌入其他文字檔案(var css = __inline('a.css'))

3,在css中嵌入 與html類似,凡是命中了資源定位能力的編譯標記, 除了src="***"之外,都可以通過新增 ?__inline 編譯標記都可以把檔案內容嵌入進來。src="***"被用在ie瀏覽器支援的filter內,該屬性不支援base64字串,因此未做處理。

也是加__inline

@import url('demo.css?__inline');

.style

三、依賴宣告 提供了宣告依賴關係的編譯介面。fis在執行編譯的過程中,會掃瞄這些編譯標記,從而建立一張 靜態資源關係表,它在編譯階段最後會被產出為乙份 map.json 檔案,這份檔案詳細記錄了專案內的靜態資源id、發布後的線上路徑、資源型別以及 依賴關係 和 資源打包等資訊。

1,在html中宣告依賴

在fis-conf.js中,通過配置usemap讓html檔案加入map.json

fis.config.merge(]}

});執行 fis release --dest ./output --md5 命令對專案進行編譯,檢視output目錄下的map.json檔案,則可看到:

,"demo.js" : ,

"index.html" :

},"pkg" : {}

}2,在js中宣告依賴

fis支援識別js檔案中的 require函式,或者 注釋中的@require欄位 標記的依賴關係,這些分析處理對 html的script標籤內容 同樣有效。

/*** @require demo.css

* @require list.js

*/var $ = require('jquery');

經過編譯之後,檢視產出的 map.json 檔案,可以看到:

,...

},"pkg" : {}

}2,在css中宣告依賴

fis支援識別css檔案 注釋中的@require欄位 標記的依賴關係,這些分析處理對 html的style標籤內容 同樣有效。

/*** demo.css

* @require reset.css

*/經過編譯之後,檢視產出的 map.json 檔案,可以看到:

,...

},"pkg" : {}

}[img]

OSGI提供服務的三種方式

摘要 osgi的乙個標準就是各個bundle之間是相互隔離的,每個bundle都有自己的classloader,並且不同的版本之間都是相互隔離的,這樣就使bundle從物理上進行了隔離,那麼osgi 的bundle之間是怎麼進行通訊的呢?下面我們將要介紹3中方法。bundles之間通訊的方法 方法描...

EF提供的三種查詢方式

這邊簡單介紹一下,ado.net entity framework 提供的三種查詢方式,linq to entities query builder mothed entity sql language linq to entities 是最常見的語法,也是用最多的,來看乙個範例 示範 linq t...

實現CSS布局的三種機制和常見頁面的三種布局

css提供三種機制來設定盒子的擺放位置,分別是普通流 浮動 定位,其中,1.普通流 標準流 2.浮動 概念 元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制,移動到其父元素中指定位置的過程。與兄弟盒子的關係 注 當元素新增浮動後,會具有行內塊級元素的特性 元素的大小取決於 內容的大小和元素內...