FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

官网：http://fis.baidu.com/

通俗点说，fis内置了less、sass、js /css/html-compress、mod.js、smarty、vue.js、angularjs等常用前端组件的开发库，使用简单的命令初始化项目，并通过简单的配置即可实现文件指纹、资源压缩、CssSprite图片合并、本地调试（通过配置模拟后端数据）、一键发布。

本文以fis3-smarty为例讲解如何快速实现一个前后端分离、组件化的前端工程。

一、安装

# nodejs（注：一定到官网下载最新版本，别用yum或brew安装，node版本太低有很多问题）
wget https://nodejs.org/dist/v12.14.1/node-v12.14.1-linux-x64.tar.xz
xz -d node-v12.14.1-linux-x64.tar.xz  && tar xvf node-v12.14.1-linux-x64.tar
cd node-v12.14.1-linux-x64
sudo cp include bin lib share /usr/ -r
# fis3
sudo npm install -g fis3
fis3 -v
# smarty
sudo npm install -g fis3-smarty
# 有历史fis-plus项目的可以安装fis-plus
sudo npm install -g fis-plus

二、使用

# 0.搭建项目脚手架
mkdir demo-smarty
cd demo-smarty
fis3 init php-smarty
  prompt: namespace:  demo-smarty
  prompt: Run `npm install`?:  (y) y
  prompt: Run `fis3 install`?:  (y) y

# 1.本地调试
启动本地调试server：
cd demo-smarty
fis3 server restart -p 8090 --type smarty -w    # fis3 server -h查看帮助
访问本地调试server：
http://127.0.0.1:8090/

# 2.编译&发布
cd demo-smarty
fis3 release dev -d output/
*产出的三个子目录：config、static、template


准备widget等smarty-plugin：
 vim odp/conf/smarty.conf
   template_dir: template/
   config_dir: template/config/
   plugins_dir: template/plugin/
 cd odp/template
 wget https://blog.yanjingang.com/wp-content/uploads/2020/02/plugin.tar.gz
 tar zxvf plugin.tar.gz
把编译好的模版和静态文件放到odp目录
cd demo-smarty
vim build.sh # 把build和deploy放到一个脚本里了
  #/bin/sh
  ODP_PATH=/home/work/odp
  # fis3 build
  fis3 release dev -d ./output
  if [ ! -d "./output/static" ]; then
      echo "./output/static path not exists, build fail!"
      exit 1
  fi
  # deploy to odp
  mkdir $ODP_PATH/template/config -p
  mkdir $ODP_PATH/webroot/static/ -p
  cp ./output/template/* $ODP_PATH/template/ -r
  cp ./output/static/* $ODP_PATH/webroot/static/ -r
  cp ./output/config/*-map.json $ODP_PATH/template/config/ -r
  echo "build done!"

sh build.sh


# 4. sync同步请求模版渲染
创建模版渲染action：
<?php
/**
 * @name Action_Index
 * @desc 测试页面
 * @author 闫金钢(yanjingang@mail.com)
 */
class Action_Index extends Ap_Action_Abstract {
 /**
   *
   * @param input 
   * @return result 
   *
   **/
   public function execute() {
        $arrResult = [
            'errno'=> 0,
            'data'=> ['username'=> 'yanjingang@mail.com'] ,
         ];
         // TODO
         //模版渲染
         $smartyConf = Bd_Conf::getConf('/smarty/');
         $tpl = Bd_TplFactory::getInstance($smartyConf['default']);	//conf/smarty.conf中的default配置
         $tpl->assign($arrResult['data']);	//用于同步渲染的数据
         $tpl->display('demo-smarty/page/index.tpl');
    }
}

访问action看到的页面：

测试代码：https://github.com/yanjingang/study/tree/master/fis

三、常见问题

1.$ fis3 release 报错

[INFO] Currently running fis3 (/usr/lib/node_modules/fis3/)
/usr/lib/node_modules/fis3/node_modules/chokidar/index.js:151
async remove(item) {
^^^^^^

原因：nodejs版本过低

$ node -v
v6.17.1

解决办法：使用官网下载最新版本后重新正常。

2.切换页面时，tpl更新了main block，但是页面却未切换

原因：block定义在了widget组件内，smarty为了提高渲染效率默认会对widget组件模版编译进行cache（cache位置：data/smarty/compile/），会导致widget组件内的block被cache，从而无法替换为当前tpl中的tpl block

解决办法：block不要定义在widget中，统一放到page/layout.tpl中即可。

yan 20.2.1 21:30