初探FIS3

最新推荐文章于 2026-05-02 13:39:55 发布
原创 最新推荐文章于 2026-05-02 13:39:55 发布 · 1.2k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

前端构建工具FIS3

FIS3 的构建主要是通过用户设置，将构建结果输出到指定的目录。
不会修改源码。

构建过程中对资源 URI 进行了替换，替换成了绝对 URL。就是相对路径换成了绝对路径

内置语法

一套前端编译工具，只要3项编译能力，就可以变得非常易用，代码可维护性瞬间提高很多。
- 资源定位
- 内容嵌入
- 依赖声明

资源定位

如图所示：
如何定位开发路径和部署环境：
如何定位开发路径和部署环境
FIS3 的构建是不会对源码做修改的，而是构建产出到了另外一个目录，并且构建的结果才是用来上线使用的。

上图中的图片logo本身在开发过程中存在于widget目录下，经过资源定位，release到了static目录下的img目录，对于资源的引用并不会出错，也有利于开发人员使用相对路径开发。

图片命名后的一串数字，是在构建过程中携带的MD5戳。
md5戳是唯一标识一个文件的“文件指纹”，url后也带相应的md5戳

内容嵌入

内容嵌入即嵌入资源
提供诸如图片base64嵌入到css、js里，前端模板编译到js文件中，将js、css、html拆分成几个文件最后合并到一起的能力

可以有效的减少http请求数，提升工程的可维护性
例如：

源码：
 <img title="百度logo" src="images/logo.gif?__inline"/>
 编译后：
   <img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>
声明依赖

声明依赖能力为工程师提供了声明依赖关系的编译接口
在html中声明依赖

用户可以在html的注释中声明依赖关系，这些依赖关系最终会被记录下来，当某个文件中包含字符 RESOURCE_MAP 那么这个记录会被字符串化后替换 RESOURCE_MAP。为了方便描述呈现，我们假定项目根目录下有个文件 manifest.json包含此字符，编译后会把表结构替换到这个文件中。

目录规范

源码目录规范

.
├── page
│ └── index.html
├── static
│ └── lib
├── test
└── widget
├── header
├── nav
└── ui

  • page 放置页面模板
  • widget 一切组件，包括模板、css、js、图片以及其他前端资源
  • test 一些测试数据、用例
  • static 放一些组件公用的静态资源
  • static/lib 放置一些公共库，例如 jquery, zepto, lazyload 等

编译产出时

产出结果目录:

.
├── static
├── template
└── test

  • static 所有的静态资源都放到这个目录下
  • template 所有的模板都放到这个目录下
  • test 还是一些测试数据、用例

源码目录规范的指定是为了我们好维护，其产出目录规范是为了我们容易部署

前端 后端 Fis3+Es6+Smarty+Tmpl
04-08
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 = &#39;http://127.0.0.1/graduation-rd/receiver.php&#39;; const to_path = &#39;/graduation-rd&#39;; const base_url = &#39;/Applications/XAMPP/xamppfiles/htdocs/graduation-rd/&#39;; 安装 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 发布位置
前端工具简介 fis3,webpack
java_goodstudy的博客
10-12 2791
作者：宅小二 链接：https://zhuanlan.zhihu.com/p/20933749 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 注：本人是FIS重度使用者，纯属以分享的心态推广FIS3，可能会对FIS更为赞赏，但与FIS3研发团队没有半毛钱关系。也没有贬低webpack或者其他工具的意思，如有观点不准确或有失偏颇，权当理解为本人偏见。
FIS3简介
lucky2_的博客
09-20 1045
FIS简介
终极指南：FIS3构建原理揭秘，让前端工程化不再复杂
最新发布
gitblog_00420的博客
05-02 878
FIS3是一款功能强大的前端工程构建系统，它能够帮助开发者自动化处理前端开发中的各种任务，从代码检查、预编译到资源合并优化，极大地提升开发效率和项目质量。无论你是前端新手还是有一定经验的开发者，理解FIS3的构建原理都将对你的项目开发带来巨大帮助。 ## 为什么选择FIS3进行前端工程构建？ 在现代前端开发中，工程构建系统扮演着至关重要的角色。FIS3作为一款成熟的前端工程构建工具，具有以下优
了解FIS3
weixin_44987155的博客
06-30 435
FIS3 是什么？ 最近接触到了fis3的相关使用，所以也了解了fis3相关的一些基础知识。 FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。 一、安装fis3（要安装node） 执行cmd命令： npm install -g fis3 安装完成后，测试是否安装成功，输入命令：...
UltraRAG多模态RAG实现：图片与文本混合检索的完整教程
gitblog_00094的博客
02-02 568
UltraRAG是一款强大的多模态检索增强生成（RAG）工具，支持图片与文本的混合检索，帮助开发者快速构建智能问答系统。本教程将详细介绍如何使用UltraRAG实现多模态RAG，从环境搭建到实际应用，让你轻松掌握这一先进技术。 ## 什么是多模态RAG？ 多模态RAG（Retrieval-Augmented Generation）是一种结合图片和文本信息进行检索和生成的技术。与传统RAG相比，
【前端】fis3框架学习
qq_26127905的博客
07-10 347
文章目录1. 1.
使用来自百度的FIS 打包项目初探笔记
tianja
05-13 1537
非原创 文章原链接（http://www.gbtags.com/gb/share/5567.htm） 如若侵权  马上删除   最近随着grunt的火热，前端项目打包也成为了一个前端工程师必备的技能。这两天发现除了国外的grunt国内百度的FIS也是一个相当不错的工具，最最最起码他的说明文档教程API等等都是中文滴，对于英文不好的朋友来说，学习起来那是相当的方便。好了
百度地图之鹰眼轨迹V3之初探
孤雪飘寒的专栏
07-28 1773
前言 环境搭建 1 下载原生的demo 2 安装nodejs 3安装fis3 4 安装依赖包 5 前期配置 51 首页配置 52 fis3编译 6成功预览下吧 7账号配置 附录 文档结构 API接口说明 官方建议需要了解的东西前言 最近项目中在使用这个，我也才开始接触这个，所有算是一个分享吧，网上V3的资料又少的可怜，我使用的是MAC，所有以mac为平台来记录。其他环境 我会给予链接地址，方便传
NS3初探
南瑾与春风的博客
12-15 5826
NS3初探 文章目录NS3初探一、简介NS3和NS2的不同二、NS3的编译运行1.waf编译器三、NS3重要概念1 节点——Node类2 信道——Channel类3 网络设备——NetDevice类4 应用程序——Application类5 拓扑帮助-topology helper6 节点容器--NodeContainer7 设备容器--NetDeviceContainer四、分析例子程序first.cc的源代码 一、简介 NS3是一款离散事件驱动的网络仿真器，主要应用于研究和教育领域，旨在满足学术和教学的
初探百度F.I.S — 由工具到解决方案
王福朋
09-06 1909
1. 前言 　　阅兵放假三天，我哪儿也没去，宅着看了一些东东：git命令行、svn命令以及下面的主角——百度FIS。对看过的git、svn的命令也做了一些总结，请参见：《git命令学习笔记》和《svn命令学习笔记》   　　另外，我是开源富文本编辑器 wangEditor 的作者，欢迎大家关注我的项目。下文也会结合我在开发该编辑器过程中的经历，来对比说百度FIS 　　在查看
探索FIS3：前端快速构建与优化的利器
gitblog_00082的博客
04-11 432
探索FIS3：前端快速构建与优化的利器 是一个由阿里飞猪团队开源的前端集成解决方案，它为开发者提供了丰富的工具集和配置方式，以帮助加速项目的开发、构建和维护过程。本文将深入介绍FIS3的主要特性、技术架构以及应用场景，让你了解为何越来越多的开发者选择FIS3。 一、项目简介 FIS3全称为"Frontend Integrated Solution Version 3"，它是FI...
【工具】fis3 - 使用教程（02）
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
12-05 3966
前提回顾OK，在本篇中我们将介绍如何调式和发布前面我们已经构建好的项目。由于我们将项目进行构建之后，发现构建之后项目中的资源文件的路径从“相对路径”——>变成了“绝对路径”。这样一来，不方便我们的调式。所以，fis3为了解决这个问题，就在fis3中内置了web server 以方便调式查看我们的构建结果。那问题是我们该如何使用呢？往下看~ 打开web server根目录 （1）在使用该命令的时候，有一个前提————即，我们在构建项目时，不指定输出目录，即fis3 release -d ./output 变
【工具】fis3 - 使用教程（01）
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
11-29 6323
构建发布到项目根目录下的output（该文件夹名称任意）目录中； 当然，你也可以发布到其他盘符中（windows系统下）； 4. 成功之后，你变output目录下方看到一个经过构建之后的项目了~ 5. 通过diffMerge这个文件比较工具，可以发现其中的一些改动，即构建之前和构建之后的变化： 注意：fis有一个“资源定位”的功能，它能方便的把资源的相对路径在发布之后变换为绝对路径（部署路径），这极大节省了我们在发布项目上线时更改资源路径的工作。 6. 同时，我们可以将静态资源统一发布到一个目录下，比如o
fis3前端工程构建配置入门教程
weixin_30706507的博客
07-07 286
壹 ❀ 引 fis3是百度推出的一款前端工程构建工具，类似的还有webpack，gulp等工具；无论大家有没有使用过，从事前端行业应该都略知一二了，所以对于此类工具用干嘛的我这里就不做重复了。 其实对于这类构建工具，大部分人是不感兴趣，或者说有些畏惧的，配置多贼麻烦，无法像js一样调试很恐怖，给人感觉很难；特别是fis3这种相对比较冷门的构建工具，出现问题百度一圈相关答案真的很少... ...
fis3前端工程构建配置总结
11-23 1285
憋了好久，还是决定写下这篇博客,fis3是自动化的构建工具而已，它的构建不会修改源码，而是会通过用户设置，将构建结果输出到指定的目录。下面我们来谈下怎么配置fis3的（怎么安装这里就不说了） 1.fis3工作流程 FIS3 是基于文件对象进行构建的，每个进入 FIS3 的文件都会实例化成一个 File 对象，整个构建过程都对这个对象进行操作完成构建任务。 整个 FIS3 的构建流程大体概括分为三个...
FIS3 安装与配置指南
gitblog_00652的博客
04-20 526
FIS3 是一个面向前端开发的工程构建系统，它致力于解决前端工程中的性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。FIS3 的核心是用配置文件来管理项目的构建过程，通过为文件添加属性，控制文件的编译、合并等操作。 ## 2. 项目主要编程语言 FIS3 主要使用 JavaScript 进行开发，同时也涉及 CSS、HTM...
FIS3前端构建工具入门教程：从零开始构建项目
gitblog_00740的博客
06-19 464
FIS3是一款功能强大的前端构建工具，由百度前端团队开发维护。它通过灵活的配置和丰富的插件体系，能够帮助开发者高效地完成前端项目的构建、优化和部署工作。本文将带领大家从零开始，通过一个简单示例项目，逐步了解FIS3的核心功能和基本使用方法。 ## 环境准备 在开始之前，请确保已安装Node.js环境。FIS3基于Node.js开发，因此需要先安装Node.js才能使用。 ## 创建第一个FI...
浅谈百度的FIS3框架
筱葭的博客
05-01 5620
FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。   1、FIS3的安装 安装命令：npm install -g fis3 查看是否安装成功：fis3 -v 升级FIS3：npm update -g fis3或npm install -g fis3（重装）   2
简单了解一下FIS
weixin_45047039的博客
11-21 890
简单了解一下FIS一、基本使用二、fis的编译与压缩2.1、编译scss2.2、编译js2.3、压缩三、respect 一、基本使用 安装 yarn global add fis3 因为fis3.0版本相较于之前版本有了很大变化，所以单独取名为fis3 使用 fis3 release release方法是fis3当中默认的构建任务，这个构建任务会将项目中所有需要被构建的文件自动构建到一个临时目录当中，这个目录一般在用户目录中可以找到 我们也可以指定构建输出目录 fis3 release -d outp
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值