基于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所对应的命令是：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

作者：管伟