基于Fis3和Idtc的頭條前端開發(fā)套件安裝及使用向?qū)Вń袢疹^條前端用什么框架）

基于Fis3和Idtc的頭條前端開發(fā)套件安裝及使用向?qū)?/p>

以下簡稱套件

背景

Fis3是一款百度開發(fā)的前端構(gòu)建工具（http://fis.baidu.com/），頭條前端之前的開發(fā)模式基于Fis2，大體上基本的構(gòu)建需求都可以滿足。但是時間久了，一些開發(fā)方面的問題就會暴露出來，比如：多個模塊之間不能共享通用資源、Fis的本地調(diào)試Server太過簡陋、沒法Mock數(shù)據(jù)、太依賴遠程開發(fā)機進行新功能的開發(fā)和調(diào)試等問題。為了解決這些問題，所以在Fis3的基礎(chǔ)上封裝出了Fis3-wrapper-common模塊，以Fis3作為依賴，提供附加功能。

同時，為了彌補Fis3工具在本地調(diào)試和Mock數(shù)據(jù)方面的缺陷，本地Webserver調(diào)試器采用了Idtc(https://github.com/guananddu/idt/tree/idt4none-contextify)作為輔助開發(fā)工具。Idtc出彩的地方在于它完善的假數(shù)據(jù)Mock功能，它提供了針對后端模板引擎，例如：Django Template、Java Velocity、Java Freemarker、PHP Smarty的解析和假數(shù)據(jù)填充功能。Idtc不僅能針對后端模板進行Mock數(shù)據(jù)，還能針對普通的Ajax請求進行Mock數(shù)據(jù)，真正地提高了前端人員的開發(fā)效率，并且使得前端開發(fā)完全脫離了后端的服務(wù)環(huán)境，前端人員只需關(guān)注接口數(shù)據(jù)即可。更加詳細的介紹請往下看～

設(shè)計目標

• ★ 解決跨站資源依賴

• ★ 提供完善的本地開發(fā)（脫離任何后端環(huán)境的開發(fā)）、假數(shù)據(jù)Mock的功能

• 完全地兼容Fis3原生命令（例如watch，remote push）

• 集成Fis3常用插件，省去手動安裝

• 提供對ES6語法、標準AMD規(guī)范（require.js）的支持

• 提供對前端模板引擎的內(nèi)置支持（使用handlebars-v4.0.4 ，仍舊采用*.tmpl擴展名作為模板文件）

配置預(yù)覽

解決跨站資源依賴

提供完善的本地開發(fā)（脫離任何后端環(huán)境的開發(fā)）、假數(shù)據(jù)Mock的功能

完全地兼容Fis3原生命令（例如watch，remote push）

本地開發(fā) watch:

fis3b release local -d ../output –watch

遠程發(fā)布：

集成Fis3常用插件，省去手動安裝

提供對ES6語法、標準AMD規(guī)范（require.js）的支持

提供對前端模板引擎的內(nèi)置支持

套件安裝

保證node和python的環(huán)境是ok的，使用npm安裝如下包：

npm install -g fis3-wrapper-common

npm install -g idtc

使用easy_install安裝如下包（用來解析本地調(diào)試下的django template）：

easy_install “Django==1.7”

安裝完畢以后：

• fis3-wrapper-common所對應(yīng)的命令是：fis3b

• idtc所對應(yīng)的命令是：idtc

如下：

fis3b -H

-V命令可查看fis3-wrapper-common的版本號。除去-H,-V,clear三個命令外，其他的命令被自動轉(zhuǎn)向fis3原生命令：

fis3b -v

如上：可以通過-v來查看內(nèi)置fis3的版本號。同理，可以通過-h或者--help來獲取fis3的內(nèi)置幫助：

fis3b –help

idtc命令查看：

idtc中，我們只需關(guān)注ws的功能即可，其他命令可以忽略掉：

我們常用的命令即是：

idtc ws start

示例項目結(jié)構(gòu)

設(shè)置如下示例項目，供大家參考：

特性詳解

以下的特性詳解，均以示例項目為范本，project_main_wap為主項目，其他三個為輔助項目

解決跨站資源依賴

fis3-wrapper-common（下面簡稱fwc）對fis3進行了包裝，整體構(gòu)建過程是這樣的：

① fwc執(zhí)行beforebuild邏輯，讀取project.dependencies配置

② fwc根據(jù)依賴配置，將依賴的資源copy至當前項目的根目錄中，并且填充.gitignore文件，防止誤提交

③ fwc調(diào)起fis3開始根據(jù)fis-conf.js里面的配置進行編譯及打包

④ 打包完畢后，fwc執(zhí)行afterbuild邏輯，清理當前項目中的依賴項，防止誤提交

⑤ 如果采用了watch功能，則fwc監(jiān)聽SIGINT信號，當Ctrl C終端watch時，自動調(diào)用afterbuild邏輯，與第④步驟相同

來看看fws源碼即可了然：

fwc 保持了fis3中的watch功能

先來確定下project_main_wap項目定義的依賴項：

如下，在沒有進行watch時，project_main_wap的結(jié)構(gòu)如下：

當我們執(zhí)行：

fis3b release local -d ../output –watch

以后，再看當前項目的目錄結(jié)構(gòu)：

多出了三個依賴項！而且，依賴項的配置，可以是某個文件，也可以是整個文件夾：

可以看到，并不是把整個project_wap給copy過來，而是把具體的那個文件或者文件夾給copy過來。

那么，在我們編輯project_main_wap/project_wap/common/utils/ads.js文件的時候，外圍的project_wap/common/utils/ads.js也會同步變動，文件夾的相關(guān)操作也是同步的，fwc在內(nèi)部好了WATCH工作。

在修改project_main_wap項目中的依賴項時，要修改project_main_wap中自動生成的依賴，而不要直接修改外圍的依賴項，因為fws只實現(xiàn)了對依賴項增刪改的單向同步。

開發(fā)完畢，中斷fis3的watch命令時：

…………… 17.36s [15:25:43.922]

^C

Process:23676 Will Exit.

再看目錄結(jié)構(gòu)：

恢復(fù)正常了。但是萬一中途出現(xiàn)其他異常情況，project_main_wap內(nèi)的依賴項沒有被清除掉怎么辦？執(zhí)行它：

fis3b clear

上述執(zhí)行的fis3b相關(guān)的命令，要在具體的項目中執(zhí)行哦，這里都是在project_main_wap中執(zhí)行的。（除去tree命令）

提供完善的本地開發(fā)（脫離任何后端環(huán)境的開發(fā)）、假數(shù)據(jù)Mock的功能

仍舊以project_main_wap項目為例：

fis3b release local -d ../output

這樣就把構(gòu)建出的項目發(fā)布到了../output目錄中，在終端中cd ../output進入到output目錄中，執(zhí)行：

idtc ws start

命令響應(yīng)OK以后，訪問：http://127.0.0.1:8003/project_main_wap/page/index/shownexp.html即可在本地打開一個全功能的頁面。

注意project_main_wap/mock目錄：

但是！這個目錄結(jié)構(gòu)需要我們手動生成嗎？？這豈不是很蛋疼？其實如果手比較勤快，是可以手動生成的，因為這些文件都對應(yīng)了真實的目錄結(jié)構(gòu)。

在項目初期，mock文件夾可以不用手動創(chuàng)建，再發(fā)布到本地的時候，跑起來idtc的webserver就能夠一步一步地找到shownexp.html文件，那么當從瀏覽器中放問到這個頁面的時候，就會自動生成對應(yīng)的mock目錄結(jié)構(gòu)，只是假數(shù)據(jù)需要填充一下而已，假數(shù)據(jù)的書寫，可以完全參看shownexp.html.js的格式來。之后，把mock文件夾手動copy至項目中，則可以重復(fù)利用～

聊聊AJAX的數(shù)據(jù)MOCK

ajax數(shù)據(jù)mock方法類似，當我們滑動shownexp.html頁面到最底端的時候，會發(fā)起一個ajax請求：

/path2ajax/v1/moments/list/

而此請求的mock數(shù)據(jù)來自：

具體格式可以查看示例。需要注意的一點，ajax的mock文件，不僅僅可以簡單的：

還可以：

用來生成動態(tài)數(shù)據(jù)。

Tips: 在watch狀態(tài)下修改mock數(shù)據(jù)，直接修改project_main_wap/mock目錄下的即可，fis3會自動將mock文件發(fā)布到output目錄下，刷新瀏覽器即可生效。

PUSH到開發(fā)機

開發(fā)機上要提前安裝好相應(yīng)的接收端服務(wù)：

npm install -g fis3-receiver

在遠端機器上執(zhí)行：

whoami@in-remote:~$ fis3rcv 6772

receiver listening *:6772

并且確保自己的遠程發(fā)布配置是有效的：

在project_main_wap下面執(zhí)行：

fis3b release whoami

就會先build項目，然后發(fā)布到遠端機器上，查看效果即可。

跨站模板資源的引用

同樣參看project_main_wap/page/index/shownexp.html頁面

主項目project_main_wap的模板的根目錄，要用標識符來確定，因為local模式下和正常開發(fā)模式下的模板根目錄配置是不同的，涉及到替換。

而再看project_wap/common/from_project_wap.html中的include指令，則要使用：

{% include ‘/common/included_by_from_project_wap.html’ %}

仍舊需要使用標識符，同樣需要動態(tài)確定當前屬于哪一個項目。

需要在開發(fā)時區(qū)分這一點。

前端模板的使用

fis-conf.js中，已經(jīng)配置好了：

要這樣使用：

細心的話可以注意到，project_main_wap項目中引入的是example_widget中的handlebars庫文件和tmpl模板文件，這就是靜態(tài)資源的跨站引用。

標準AMD規(guī)范式編碼（才用了require.js）

fws默認加入了AMD標準規(guī)范的支持：

那么如何使用呢？而且，如何讓fis3和require.js有效地結(jié)合在一起呢？這樣：

這樣的形式，同時也兼容了fis3對靜態(tài)資源添加md5戳的構(gòu)建需求。

跨站less的引用

不再贅述，請具體細看：project_main_wap/page/index/shownexp.html中的：test 4 less

Tips: 需要注意的一點是，在同一個項目中的less文件中，使用import引入其他文件，最好采用相對路徑，可以很大程度上防止跨站資源引用的出錯。

ES6的支持

fws集成了對es6源文件的編譯插件：

這樣使用即可：

工具開發(fā)與維護

fis3-wrapper-common的github:

https://github.com/guananddu/fis3-wrapper-common

Idtc:

https://github.com/guananddu/idt/tree/idt4none-contextify

遇到任何bug請及時提交issues

也可以一起來開發(fā)和改進哦～

Other

配置文件示例：

http://s.pstatp.com/site/tt_mfsroot/standard/fis3idtc/fis-conf.js

作者：管偉