因为公司项目需要,前端使用FIS框架开发。下面是我的学习笔记。
FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。
首先来说说fis项目的目录结构
工具安装&示例准备
//全局安装fis
npm install -g fis
//从git上获取demo项目
git clone https://github.com/hefangshi/fis-quickstart-demo.git
//本地安装依赖
npm install fis
//启动项目
fis server start
如果8080端口被占用,可以通过
fis server start -p [port]指定新的端口。
如果没有java、php环境,可以通过fis server start --type node启动Node版fis server。
命令执行后内置服务器会一直运行,可以通过fis server stop命令关闭内置服务器。
本地调试服务器启动成功后,就会自动打开 http://127.0.0.1:8080
FIS命令
fis3 relaese
编译并发布你的项目
-h或--help 帮助
-d或--dest 编译后的代码部署路径
-w或--watch 监听文件变化触发编译
-L或者--live 编译后自动刷新浏览器
-c或者–clean 清除这个项目本地服务
-l或者--lint 编译的时候自动代码检查
-u或者--unique 编译缓存
-r或者--root 指定项目权限
--no-color 变色输出
fis3 install
使用fis安装一些公共的组件
>fis3 server
启动一个本地服务器,它采用php-java-bridge技术实现, 依赖java、php-cgi外部环境。
start 启动服务
stop 关闭服务
resatrt 重启服务
info 输出服务器信息
open打开服务器目录文档
clean 清除服务器目录的文件
install 下载
init 初始化服务器框架
fis3 inspect
查看文件命中的属性,这些属性决定文件该如何编译
日常项目开发流程
FIS的三种语言能力
我将分三个维度进行介绍:资源定位、内容嵌入、依赖环境
资源定位:
- 分离开发路径与部署路径,只需进行常规开发使用相对路径
内容嵌入 - 有效的将html、css、js整合在一起,提高开发效率,减少http请求
依赖声明
- 在编译阶段后期会产生一份map.json文件这份文件详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包等信息。使用fis作为编译工具的项目,可以将这张表提交给后端或者前端框架去运行时根据组件使用情况来 按需加载资源或者资源所在的包,从而提升前端页面运行性能。
FIS工程运行流程
见上图,单文件编译过程之后,FIS3会将所有的文件信息、配置信息、相互的依赖、发布路径等信息汇总,生成一个资源map(json)。
打包过程能读取所有的文件信息已经相互依赖关系,根据这个json在各类插件中自定义打包流程。
在这个流程中的配置中,最重要的命令是 fis.match 和 fis.plugin.
fis.match用于匹配文件,fis.plugin用于配置插件。一个文件可以被匹配多次,添加各种插件,配置十分灵活。