当前位置:网站首页 > 前端开发 > 正文

前端的工程化(前端工程化构建工具)



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

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

FIS3 是基于文件对象进行构建的,每个进入 FIS3 的文件都会实例化成一个 File 对象,整个构建过程都对这个对象进行 操作完成构建任务。

构建的时候生成一张资源依赖表。浏览器或者后端模板语言在解析的过程中通过查表得到某个静态资源在不同环境下的引用路径。

image.png

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...













到此这篇前端的工程化(前端工程化构建工具)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • 什么是前端工程化.前端面试题(前端工程化做了哪些东西,怎么做)2025-12-01 22:09:08
  • 前端工程化的理解(前端工程化的理解是什么)2025-12-01 22:09:08
  • 重绘和回流面试题(前端面试 回流和重绘)2025-12-01 22:09:08
  • 前端工程化的好处(前端工程化的意义)2025-12-01 22:09:08
  • 前端工程化解决方案(前端工程化实战)2025-12-01 22:09:08
  • 前端工程化的意义(前端工程化的理解简书)2025-12-01 22:09:08
  • 前端工程化解决方案(前端工程化的好处)2025-12-01 22:09:08
  • 前端埋点工具(前端埋点sdk)2025-12-01 22:09:08
  • 前端工程化的理解面试题(什么是前端工程化.前端面试题)2025-12-01 22:09:08
  • 前端埋点框架设计(前端埋点框架设计方案)2025-12-01 22:09:08
  • 全屏图片