因为公司项目需要,前端使用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学习笔记

FIS的三种语言能力

我将分三个维度进行介绍:资源定位、内容嵌入、依赖环境

资源定位:

  • 分离开发路径与部署路径,只需进行常规开发使用相对路径
    内容嵌入
  • 有效的将html、css、js整合在一起,提高开发效率,减少http请求

依赖声明

  • 在编译阶段后期会产生一份map.json文件这份文件详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包等信息。使用fis作为编译工具的项目,可以将这张表提交给后端或者前端框架去运行时根据组件使用情况来 按需加载资源或者资源所在的包,从而提升前端页面运行性能。

FIS工程运行流程

FIS学习笔记

见上图,单文件编译过程之后,FIS3会将所有的文件信息、配置信息、相互的依赖、发布路径等信息汇总,生成一个资源map(json)
打包过程能读取所有的文件信息已经相互依赖关系,根据这个json在各类插件中自定义打包流程。

在这个流程中的配置中,最重要的命令是 fis.matchfis.plugin.

fis.match 用于匹配文件,fis.plugin用于配置插件。一个文件可以被匹配多次,添加各种插件,配置十分灵活。

相关文章:

  • 2022-12-23
  • 2021-12-24
  • 2022-12-23
  • 2021-08-08
  • 2021-09-24
  • 2021-07-22
  • 2021-08-30
  • 2021-08-14
猜你喜欢
  • 2022-12-23
  • 2022-02-01
  • 2021-06-27
  • 2022-01-25
  • 2021-12-22
  • 2021-09-23
  • 2022-01-02
相关资源
相似解决方案