了解FIS3

FIS3 是什么?

最近接触到了fis3的相关使用,所以也了解了fis3相关的一些基础知识。
FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

一、安装fis3(要安装node)

执行cmd命令:
npm install -g fis3

安装完成后,测试是否安装成功,输入命令:
fis3 -v
如果安装成功,会如下图显示:
在这里插入图片描述
release 命令相关参数信息可以用fis3 release -h查看。

二、了解配置文件

配置文件是js文件,非常灵活,可以充分利用js的属性灵活配置。配置文档详见:配置

项目全局配置信息,通过fis.set和fis.get设置和获取项目配置信息。可以设置一些配置,如系统内置属性 project, namespace, modules, settings等。
各种可配置的属性见:配置属性
下面列举几个:

// 作为文本文件而不是二进制文件处理的后缀(附加)
fis.set('project.fileType.text', 'po,vue');

// 设置项目源码文件过滤器,下面设置只将src和src-static目录下的文件当作源码处理。
fis.set('project.files', ['src/**', 'src-static/**']);

// 排除一些文件
fis.set('project.ignore', fis.get('project.ignore').concat([
  'server/**',
  'deploy/**',
  'node_modules/**',
  'public/**',
  'DS_store'
]));

三、编译、打包流程

FIS3将编译打包流程拆分成一个个独立的步骤,主要分为单文件编译和打包两个过程,每个过程又有明确的步骤,每个步骤各司其职,分别用不同的插件处理,任务清晰明确。
流程图如下所示:
流程图
见上图,单文件编译过程之后,FIS3会将所有的文件信息、配置信息、相互的依赖、发布路径等信息汇总,生成一个资源map(json)。
打包过程能读取所有的文件信息已经相互依赖关系,根据这个json在各类插件中自定义打包流程。插件编写见:插件

在这个流程中的配置中,最重要的命令是 fis.match 和 fis.plugin。
fis.match 用于匹配文件,fis.plugin用于配置插件。一个文件可以被匹配多次,添加各种插件,配置十分灵活。

官方文档参考

http://fis.baidu.com/fis3/docs/beginning/intro.html
https://www.cnblogs.com/demodashi/p/8491165.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
graduation 毕业设计代码,还没完成!但可以跑哦~ Fis3+Es6+Smarty+Tmpl 项目实战 阅读以下部分假定你已经了解: 构建工具 Fis3 基于Smarty的解决方案 Fis-Smarty 一些杂碎 Less, Tmpl, Es6 ... 微薄网站的设计与实现 功能 展示,留言,评论,评论量,访问量 后台CMS 瀑布流展示,懒加载数据 接入微博组件等 技术方案 前后端分离 构建: Fis3 结构: HTML,TMPL,Smarty 样式: Less 类库/框架: jQuery util: urlParam ... 数据: 假数据模拟,后期发布开发机联调 目录结构 前端目录 └─graduation ├─ README.md ├─ home └─ common ├─ plugin # Smarty 的插件放入这个目录 ├─ smarty.conf # 本地测试的 Smarty 引擎的配置文件 ├─ fis-conf.js # fis3 的配置文件 ├─ page # 放一些页面 ├─ server.conf # 本地测试的URL转发规则配置文件 ├─ static # 非组件静态资源 ├─ test # 假数据 └─ widget # 放一些 widget,里面代码最终会被组件化封装 ├─ header # 头部模块 │ ├─ header.js # js文件es6 │ ├─ header.less # css预处理 │ ├─ header.tmpl # JS模板 │ └─ header.tpl # Smarty 复用还是挺方便的 ├─ nav # 导航模块 ├─ article # 文章模块 └─ footer # 尾部模块 目录文件不是都必须需要,一般都会包含page、widget俩目录 前端预览或发布到本地模拟开发机预览该项目 发布到本地模拟开发机预览该项目 修改 fis-global-conf.js const RECEIVER = 'http://127.0.0.1/graduation-rd/receiver.php'; const to_path = '/graduation-rd'; const base_url = '/Applications/XAMPP/xamppfiles/htdocs/graduation-rd/'; 安装 npm install -g fis3 npm install -g fis3-smarty 后端环境下载 启动 fis3 release -r common xuecheng fis3 release -r home xuecheng fis3 release -r ... 发布成功后目录 └─ htdocs └─graduation-rd ├── application ├── home.php ├── license.txt ├── receiver.php ├── system ├── user_guide ├── template # .tpl 发布位置 ├── static # 静态资源发布位置 ├── plugin # plugin/*.php 发布位置 └── config # config/*.json 发布位置

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值