2025年前端的工程化（前端工程化构建工具）

科技前沿 • 2025-06-12 12:45 • 阅读 15

大家好，我是讯享网，很高兴认识大家。

FIS3 一个略微小众的被置弃维护了的前端工程构建工具，解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题。

在全民拥抱webpack的时代里，简单留个笔记是爱过的印记ღ( ´･ᴗ･` )

FIS3 是基于文件对象进行构建的，每个进入 FIS3 的文件都会实例化成一个 File 对象，整个构建过程都对这个对象进行操作完成构建任务。
构建的时候生成一张资源依赖表。浏览器或者后端模板语言在解析的过程中通过查表得到某个静态资源在不同环境下的引用路径。

讯享网

1. 内置语法支持内容嵌入

这个功能可以支持一些公共模块部分抽取出来管理

讯享网

2.引用资源

讯享网

3.定位资源

4.雪碧图合并

讯享网

1. 设置规则的配置接口

2. 设置多种状态接口

讯享网

3. 设值取值

4. 插件调用接口

编译流程：
讯享网
配置启用某些插件的四个扩展点:

服务

查看全部关于server的命令详情：fis3 server —help
启动：fis3 server start
停止：fis3 server stop
清除文件：fis3 server clean
参数说明[可叠加使用]
- –root //指定根目录
- –port //指定端口
- –type //指定类型
- –timeout //设置时间超时

讯享网

编译发布

查看全部关于release的命令详情：fis3 release —help
参数说明[可叠加使用]
- -w 》等同于 –watch //监听
- -L 》等同于 –live //热更新
- -c 》等同于 –clean //清缓存

1.安装node和npm 对版本有要求。

2.全局安装fis3

3.fis3 init 模板名

讯享网

模板名可在fis-scaffold中选择适合的模板。

其中jello模板。jello+velocity模板的框架最主要的特点就是实现前后端开发分离，前后端同事只需在开发前期将接口数据约定好，即可独立进行开发工作。前端人员可以通过json数据模拟，即可在jello环境中预览页面。

这也是选择fis作为编译工具的原因之一。

4.进入项目跑起来

fis有个问题它是全局的所以每次构建的都系都放在上次构建的地方就算是跨项目了之后也是，这个是它的问题之一。

fis默认找名字叫fis-conf.js读取配置。自行补充调整适合的配置

讯享网

mark一下仅供参考欢迎更正补充 Thanks

参考资料：
官网：http://fis.baidu.com/fis3/ind...
npm关于jello的介绍：https://www.npmjs.com/package...
jello+velocity模板:
https://wenku.baidu.com/view/...
http://fex.baidu.com/blog/201...