基于Fis3和Idtc的头条前端开发套件安装及使用向导
基于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所对应的命令是：fis3bidtc所对应的命令是：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.jsfwc在内部好了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.htmlinclude指令，则要使用：
{% 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.htmltest 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
作者：管伟