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

以下簡(jiǎn)稱(chēng)套件

背景

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

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

設(shè)計(jì)目標(biāo)

• ★ 解決跨站資源依賴(lài)

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

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

• 集成Fis3常用插件，省去手動(dòng)安裝

• 提供對(duì)ES6語(yǔ)法、標(biāo)準(zhǔn)AMD規(guī)范（require.js）的支持

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

配置預(yù)覽

解決跨站資源依賴(lài)

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

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

本地開(kāi)發(fā) watch:

fis3b release local -d ../output –watch

遠(yuǎn)程發(fā)布：

集成Fis3常用插件，省去手動(dòng)安裝

提供對(duì)ES6語(yǔ)法、標(biāo)準(zhǔn)AMD規(guī)范（require.js）的支持

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

套件安裝

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

npm install -g fis3-wrapper-common

npm install -g idtc

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

easy_install “Django==1.7”

安裝完畢以后：

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

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

如下：

fis3b -H

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

fis3b -v

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

fis3b –help

idtc命令查看：

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

我們常用的命令即是：

idtc ws start

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

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

特性詳解

以下的特性詳解，均以示例項(xiàng)目為范本，project_main_wap為主項(xiàng)目，其他三個(gè)為輔助項(xiàng)目

解決跨站資源依賴(lài)

fis3-wrapper-common（下面簡(jiǎn)稱(chēng)fwc）對(duì)fis3進(jìn)行了包裝，整體構(gòu)建過(guò)程是這樣的：

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

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

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

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

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

來(lái)看看fws源碼即可了然：

fwc 保持了fis3中的watch功能

先來(lái)確定下project_main_wap項(xiàng)目定義的依賴(lài)項(xiàng)：

如下，在沒(méi)有進(jìn)行watch時(shí)，project_main_wap的結(jié)構(gòu)如下：

當(dāng)我們執(zhí)行：

fis3b release local -d ../output –watch

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

多出了三個(gè)依賴(lài)項(xiàng)！而且，依賴(lài)項(xiàng)的配置，可以是某個(gè)文件，也可以是整個(gè)文件夾：

可以看到，并不是把整個(gè)project_wap給copy過(guò)來(lái)，而是把具體的那個(gè)文件或者文件夾給copy過(guò)來(lái)。

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

在修改project_main_wap項(xiàng)目中的依賴(lài)項(xiàng)時(shí)，要修改project_main_wap中自動(dòng)生成的依賴(lài)，而不要直接修改外圍的依賴(lài)項(xiàng)，因?yàn)?code>fws只實(shí)現(xiàn)了對(duì)依賴(lài)項(xiàng)增刪改的單向同步。

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

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

^C

Process:23676 Will Exit.

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

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

fis3b clear

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

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

仍舊以project_main_wap項(xiàng)目為例：

fis3b release local -d ../output

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

idtc ws start

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

注意project_main_wap/mock目錄：

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

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

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

ajax數(shù)據(jù)mock方法類(lèi)似，當(dāng)我們滑動(dòng)shownexp.html頁(yè)面到最底端的時(shí)候，會(huì)發(fā)起一個(gè)ajax請(qǐng)求：

/path2ajax/v1/moments/list/

而此請(qǐng)求的mock數(shù)據(jù)來(lái)自：

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

還可以：

用來(lái)生成動(dòng)態(tài)數(shù)據(jù)。

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

PUSH到開(kāi)發(fā)機(jī)

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

npm install -g fis3-receiver

在遠(yuǎn)端機(jī)器上執(zhí)行：

whoami@in-remote:~$ fis3rcv 6772

receiver listening *:6772

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

在project_main_wap下面執(zhí)行：

fis3b release whoami

就會(huì)先build項(xiàng)目，然后發(fā)布到遠(yuǎn)端機(jī)器上，查看效果即可。

跨站模板資源的引用

同樣參看project_main_wap/page/index/shownexp.html頁(yè)面

主項(xiàng)目project_main_wap的模板的根目錄，要用標(biāo)識(shí)符來(lái)確定，因?yàn)?code>local模式下和正常開(kāi)發(fā)模式下的模板根目錄配置是不同的，涉及到替換。

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

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

仍舊需要使用標(biāo)識(shí)符，同樣需要?jiǎng)討B(tài)確定當(dāng)前屬于哪一個(gè)項(xiàng)目。

需要在開(kāi)發(fā)時(shí)區(qū)分這一點(diǎn)。

前端模板的使用

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

要這樣使用：

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

標(biāo)準(zhǔn)AMD規(guī)范式編碼（才用了require.js）

fws默認(rèn)加入了AMD標(biāo)準(zhǔn)規(guī)范的支持：

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

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

跨站less的引用

不再贅述，請(qǐng)具體細(xì)看：project_main_wap/page/index/shownexp.html中的：test 4 less

Tips: 需要注意的一點(diǎn)是，在同一個(gè)項(xiàng)目中的less文件中，使用import引入其他文件，最好采用相對(duì)路徑，可以很大程度上防止跨站資源引用的出錯(cuò)。

ES6的支持

fws集成了對(duì)es6源文件的編譯插件：

這樣使用即可：

工具開(kāi)發(fā)與維護(hù)

fis3-wrapper-common的github:

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

Idtc:

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

遇到任何bug請(qǐng)及時(shí)提交issues

也可以一起來(lái)開(kāi)發(fā)和改進(jìn)哦～

Other

配置文件示例：

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

作者：管偉