基于Fis3和Idtc的头条前端开拓套件安装及利用引导
以下简称套件
背景
Fis3是一款百度开拓的前端构建工具（http://fis.baidu.com/），头条前端之前的开拓模式基于Fis2，大体上基本的构建需求都可以知足。但是韶光久了，一些开拓方面的问题就会暴露出来，比如：多个模块之间不能共享通用资源、Fis确当地调试Server太过简陋、没法Mock数据、太依赖远程开拓机进行新功能的开拓和调试等问题。为理解决这些问题，以是在Fis3的根本上封装出了Fis3-wrapper-common模块，以Fis3作为依赖，供应附加功能。
同时，为了填补Fis3工具在本地调试和Mock数据方面的毛病，本地Webserver调试器采取了Idtc(https://github.com/guananddu/idt/tree/idt4none-contextify)作为赞助开拓工具。Idtc出彩的地方在于它完善的假数据Mock功能，它供应了针对后端模板引擎，例如：Django Template、Java Velocity、Java Freemarker、PHP Smarty的解析和假数据添补功能。Idtc不仅能针对后端模板进行Mock数据，还能针对普通的Ajax要求进行Mock数据，真正地提高了前端职员的开拓效率，并且使得前端开拓完备分开了后真个做事环境，前端职员只需关注接口数据即可。更加详细的先容请往下看～
设计目标
★ 办理跨站资源依赖
★ 供应完善确当地开拓（分开任何后端环境的开拓）、假数据Mock的功能
完备地兼容Fis3原生命令（例如watch，remote push）
集成Fis3常用插件，省去手动安装
供应对ES6语法、标准AMD规范（require.js）的支持
供应对前端模板引擎的内置支持（利用handlebars-v4.0.4+，仍旧采取.tmpl扩展名作为模板文件）
配置预览
办理跨站资源依赖
供应完善确当地开拓（分开任何后端环境的开拓）、假数据Mock的功能
完备地兼容Fis3原生命令（例如watch，remote push）
本地开拓+watch:
fis3b release local -d ../output --watch
远程发布：
集成Fis3常用插件，省去手动安装
供应对ES6语法、标准AMD规范（require.js）的支持
供应对前端模板引擎的内置支持
套件安装
担保node和python的环境是ok的，利用npm安装如下包：
npm install -g fis3-wrapper-common
npm install -g idtc
利用easy_install安装如下包（用来解析本地调试下的django template）：
easy_install \"大众Django==1.7\"大众
安装完毕往后：
fis3-wrapper-common所对应的命令是：fis3b
idtc所对应的命令是：idtc
如下：
fis3b -H
-V命令可查看fis3-wrapper-common的版本号。撤除-H,-V,clear三个命令外，其他的命令被自动转向fis3原生命令：
fis3b -v
如上：可以通过-v来查看内置fis3的版本号。同理，可以通过-h或者--help来获取fis3的内置帮助：
fis3b --help
idtc命令查看：
idtc中，我们只需关注ws的功能即可，其他命令可以忽略掉：
我们常用的命令即是：
idtc ws start
示例项目构造
设置如下示例项目，供大家参考：
特性详解
以下的特性详解，均以示例项目为范本，project_main_wap为主项目，其他三个为赞助项目
办理跨站资源依赖
fis3-wrapper-common（下面简称fwc）对fis3进行了包装，整体构建过程是这样的：
① fwc实行beforebuild逻辑，读取project.dependencies配置
② fwc根据依赖配置，将依赖的资源copy至当前项目的根目录中，并且添补.gitignore文件，防止误提交
③ fwc调起fis3开始根据fis-conf.js里面的配置进行编译及打包
④ 打包完毕后，fwc实行afterbuild逻辑，清理当前项目中的依赖项，防止误提交
⑤ 如果采取了watch功能，则fwc监听SIGINT旗子暗记，当Ctrl+C终端watch时，自动调用afterbuild逻辑，与第④步骤相同
来看看fws源码即可了然：
fwc 保持了fis3中的watch功能
先来确定下project_main_wap项目定义的依赖项：
如下，在没有进行watch时，project_main_wap的构造如下：
当我们实行：
fis3b release local -d ../output --watch
往后，再看当前项目的目录构造：
多出了三个依赖项！
而且，依赖项的配置，可以是某个文件，也可以是全体文件夹：
可以看到，并不是把全体project_wap给copy过来，而是把详细的那个文件或者文件夹给copy过来。
那么，在我们编辑project_main_wap/project_wap/common/utils/ads.js文件的时候，外围的project_wap/common/utils/ads.js也会同步变动，文件夹的干系操作也是同步的，fwc在内部好了WATCH事情。
在修正project_main_wap项目中的依赖项时，要修正project_main_wap中自动天生的依赖，而不要直接修正外围的依赖项，由于fws只实现了对依赖项增编削的单向同步。
开拓完毕，中断fis3的watch命令时：
............... 17.36s [15:25:43.922]
^C
Process:23676 Will Exit.
再看目录构造：
规复正常了。但是万一中途涌现其他非常情形，project_main_wap内的依赖项没有被打消掉怎么办？实行它：
fis3b clear
上述实行的fis3b干系的命令，要在详细的项目中实行哦，这里都是在project_main_wap中实行的。（撤除tree命令）
供应完善确当地开拓（分开任何后端环境的开拓）、假数据Mock的功能
仍旧以project_main_wap项目为例：
fis3b release local -d ../output
这样就把构建出的项目发布到了../output目录中，在终端中cd ../output进入到output目录中，实行：
idtc ws start
命令相应OK往后，访问：http://127.0.0.1:8003/project_main_wap/page/index/shownexp.html即可在本地打开一个全功能的页面。
把稳project_main_wap/mock目录：
但是！
这个目录构造须要我们手动天生吗？？这岂不是很蛋疼？实在如果手比较勤快，是可以手动天生的，由于这些文件都对应了真实的目录构造。
在项目初期，mock文件夹可以不用手动创建，再发布到本地的时候，跑起来idtc的webserver就能够一步一步地找到shownexp.html文件，那么当从浏览器中放问到这个页面的时候，就会自动天生对应的mock目录构造，只是假数据须要添补一下而已，假数据的书写，可以完备参看shownexp.html.js的格式来。之后，把mock文件夹手动copy至项目中，则可以重复利用～
聊聊AJAX的数据MOCK
ajax数据mock方法类似，当我们滑动shownexp.html页面到最底真个时候，会发起一个ajax要求：
/path2ajax/v1/moments/list/
而此要求的mock数据来自：
详细魄式可以查看示例。须要把稳的一点，ajax的mock文件，不仅仅可以大略的：
还可以：
用来天生动态数据。
Tips: 在watch状态下修正mock数据，直接修正project_main_wap/mock目录下的即可，fis3会自动将mock文件发布到output目录下，刷新浏览器即可生效。
PUSH到开拓机
开拓机上要提前安装好相应的吸收端做事：
npm install -g fis3-receiver
在远端机器上实行：
whoami@in-remote:~$ fis3rcv 6772
receiver listening :6772
并且确保自己的远程发布配置是有效的：
在project_main_wap下面实行：
fis3b release whoami
就会先build项目，然后发布到远端机器上，查看效果即可。
跨站模板资源的引用
同样参看project_main_wap/page/index/shownexp.html页面
主项目project_main_wap的模板的根目录，要用标识符来确定，由于local模式下和正常开拓模式下的模板根目录配置是不同的，涉及到更换。
而再看project_wap/common/from_project_wap.html中的include指令，则要利用：
{% include '/common/included_by_from_project_wap.html' %}
仍旧须要利用标识符，同样须要动态确定当前属于哪一个项目。
须要在开拓时区分这一点。
前端模板的利用
fis-conf.js中，已经配置好了：
要这样利用：
细心的话可以把稳到，project_main_wap项目中引入的是example_widget中的handlebars库文件和tmpl模板文件，这便是静态资源的跨站引用。
标准AMD规范式编码（才用了require.js）
fws默认加入了AMD标准规范的支持：
那么如何利用呢？而且，如何让fis3和require.js有效地结合在一起呢？这样：
这样的形式，同时也兼容了fis3对静态资源添加md5戳的构建需求。
跨站less的引用
不再赘述，请详细细看：project_main_wap/page/index/shownexp.html中的：test 4 less
Tips: 须要把稳的一点是，在同一个项目中的less文件中，利用import引入其他文件，最好采取相对路径，可以很大程度上防止跨站资源引用的出错。
ES6的支持
fws集成了对es6源文件的编译插件：
这样利用即可：
工具开拓与掩护
fis3-wrapper-common的github:
https://github.com/guananddu/fis3-wrapper-common
Idtc:
https://github.com/guananddu/idt/tree/idt4none-contextify
碰着任何bug请及时提交issues
也可以一起来开拓和改进哦～
Other
配置文件示例：
http://s.pstatp.com/site/tt_mfsroot/standard/fis3idtc/fis-conf.js
作者：管伟
