搬过来深圳这边之后,发现原来只有自己一个前端,看来什么都要自己做了。

前人留下来的遗产是用的 fisp,之前完整地搭过这一套,刚好可以实践一下。 其实之前用过 fis 的话,fisp 并不困难。fis 从一个完整的解决方案来说的话,并不是一个完成品, 说到底,fis 做的事情就是编译打包,同时解决从生产目录到产出目录的路径转换。 但最后如何使用这些资源,并不包括在 fis 功能的范围内。fis 最终只会产出一个 map 文件,提供给后端使用。

而 fisp 简单来说,就是一个后端是 php 的 fis 扩展。通过 smarty 插件的支持, 实现前端资源的组件化。扩展的原理其实也很简单,就是会有一些默认的 fis 配置而已。 fisp 的设定是,一个站点划分为几个模块,其中一个是 common 模块,每个模块有自己的编译配置。

fisp 里面比较主推的一个概念是 widget,前端资源的组件化。页面模板里面并不会放太多东西, 基本上都是通过 smarty 插件对 widget 的调用(插件地址)。 模块中会有一个 widget 文件夹,用于存放组件,组件会有自己的 template, css 和 js, fisp 默认同名的会自动 require,在 widget 里面的 js 文件会被自动的包一层模块化的机制, 用的是 mod.js(其实之前都没听过),代码的复用和管理主要就是在插件的层面上做的。

这点用起来跟 webpack 的感觉有些不同,webpack 管理前端资源,主要都是围绕 entry 文件进行的,前端资源经过单文件编译之后,按照打包配置,包一层放在 entry 文件中。 页面只要引用 entry 文件就 ok 了。fisp 的逻辑是页面通过后端模板来引用前端的组件, 并不用管自己须要引用哪个包,如果组件被打包了,页面会自动的引用打包后的文件。

fisp 编译的时候使用的也是 fis 的插件,并没有什么区别,之前在 fis 用的都可以直接拿过来并没有什么所谓。 不过 fisp 使用的是 fis2 的语法,如果之前的项目是 fis3 的话,想转过来还是要费点劲。

总体用下来 fisp 还是蛮简单的,组件的组织方式也算是很自由,更重要的是,在场内前端资源也可以线上编译, 不像用其他编译工具就只能自己本地编了。