微博登录后即可参与讨论。
fansekey

预告:fis3 即将出炉 43个回复 专栏 @ FIS

fansekey 发布于 4 年前

就在过去的若干月里面,FIS 团队和 @fouber 一起就 FIS 发布以来一年多的使用情况做了一些总结,并且对其不完善地方做了抽象,终于确定了 FIS 的下一代 FIS3。如今 FIS3 在 FIS 团队的努力下快要发布了;

先来个里程碑时间吧

  • 6月14日 FIS3 第一个项目上线
  • 6月30日 FIS3 GitHub 仓库正式开放,正式发布

FIS3 快要来了,那么 FIS3 到底有哪些新奇的地方;

之所以不是 FIS2 而是 FIS3 是由于已经开源的 FIS 前还有一个用 PHP 实现的 FIS,FIS 开源以来都被称为 FIS2.0。

2013 年上 FIS@berg @walter @fouber 带领下的 FIS 团队的努力下诞生,并且解决了诸多前端工程问题以及给前端工程化一种新的思路。包括但不限于在模块化开发、自动化工具、资源加载、性能优化等等方面的突破。

FIS 通过对多年的前端项目的支持以及总结,发现前端语言不可或缺但是确实缺少的三种语言能力,资源内嵌、定位资源、依赖声明。有了这三种语言能力就可以漂亮的解决各种前端工程需求下的性能优化、模块化开发等等问题。

FIS 提供工具增加了这三种语言能力,并且给了一种资源加载管理的思路,基于静态资源表的静态资源管理方法,合理的解决了资源加载中的按需、同步/异步、依赖管理、缓存、合并、内嵌等工程问题。

FIS3 在 FIS 的基础上提升了易用性以及可扩展能力。用一种更简单的配置方法、更全面的插件扩展支持来为打造前端工程方案提供助力;

FIS3 面向前端的工程构建系统,解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。

易于理解的配置

FIS3 提出了这样一种配置方式,它就像是 CSS 一样后面书写的规则会覆盖前面前面书写的规则,像 CSS 有一些固定的规则供用户设置;文件分配到的属性,将会在编译阶段决定此文件将如何处理。

当我们要完成这样一些事情

task 1

除了某些 js 文件 exclude.js 以外,其他的 js 文件都进行压缩。

// vi fis-conf.js
fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});

fis.match('exclude.js', {
  optimizer: null
});

task 2

在开发阶段 js 不做压缩,发布上线时 js 需要压缩。

// vi fis-conf.js
fis.match('*.js', {
  optimizer: fis.plugin('uglify-js')
});
fis.media('dev').match('*.js', {
  optimizer: null
});

fis3 release 压缩

fis3 release dev 不压缩

fis.match(selector, props [, important]) 给文件分配属性

FIS3 的核心配置思想是通过给文件分配属性来控制工具对文件的处理,比如压缩、异构语言的解析、资源依赖的收集、代码检查等;

一切流程都可扩展

FIS3 重新梳理了流程,文件在 FIS3 中编译都由用户指定的插件完成,包括合并、压缩优化以及对异构语言的解析等。这一切都由你自己掌控。

fis.match('*.less', {
    parser: fis.plugin('less')
});

fis.match('*.{css,less}', {
    optimizer: fis.plugin('clean-css')
});
  • fis.plugin(name [, props]) 插件调用接口

FIS3 支持本地 NPM 包的加载,这将意味着你不再需要 npm install -g 安装一个插件到全局包目录,而可以加载本地插件了;这样方便你插件开发调试。但为了便于维护,FIS3 建议你最终发布到 NPM 上的插件依然沿用全局安装。

FIS3 对整个编译流程提供诸多事件,方便你做特定化需求;并且推出新的插件类型 hookhook 插件会在编译之前做加载,可在其内部绑定一些事件来完成特定的需求,比如相对路径的支持。

其他特性

  • 可扩展三种语言能力语法
  • 方便易用的脚手架
  • 支持 AMD、commonJS、Rosetta (web-components) 模块化方案 (插件提供)
  • 模块化方案可自由定制
  • 若干功能改进
    • watch 功能开启时,修改项目配置文件 fis-conf.js 即时生效,不再需要重启

$

FIS3 主要是用户易用性和扩展能力的提升,定位是方便那些做前端工程方案的用户能快捷的完成方案定制,我们不期待所有的人都能拿来即用,而我们期待的是 FIS3 真正能使你从折腾工具中解放出来,通过几行配置、依靠 FIS 社区能快速解决你遇到的工程问题。

扩展阅读

  • Yun.kou

    @fansekey fis.baidu.com 对因为这个网站是使用fis的人看的最多的,还是建议完善完善文档吧,我有朋友在你们公司,他说自己人用都嫌文档不全,写东西找不到还要看看源码。

    完善的文档会给更多人提供方便。

    #31
  • fansekey

    @Yun.kou 嗯,百度内部应该用 fis-plus 会更多一些,这是一个基于 FIS 的解决方案,可能TA没找对地方。不过确实 FIS 官网文档有欠缺的地方,我们在加倍努力完善,感谢反馈。

    #32
  • nimo

    囧~
    fis3 什么时候发布,我刚准备写一系列很初级的fis入门教程。会不会木有意义了

    https://github.com/nimojs/fis-book

    #33
  • fansekey

    @nimo 不会,不过看你写的内容,也是我最近想做的,但我不是写文档,而是用 demo 的形式,要不一起共建? https://github.com/fex-team/fis2-demo

    #34
  • nimo

    @fansekey 从不了解工程构建去学习FIS的角度来看,官网的使用文档更偏向于 API,有些没接触过前端构建的同行会完全不能入手。

    特别是 FIS server 功能会让新手迷惑。比如我用 FIS构建项目,但是 server 用的是自己的,构建后的发布还是基于 SVN/GIT 先提交到测试环境。

    但 server 又必须存在,百度的前端都是有一点技术底蕴的按照官网的API和与同事的沟通就可以上手了。

    但对于一些小公司的前端,他们可能还完全不理解什么是 FIS/Grunt/Gulp 。不理解为什么要模块化开发和编译 LESS/Sass 的意义。

    我第一次访问 FIS 官网时候就是这种状态,感觉 FIS 很牛,提供的是一整套的解决方案。但是我完全不能理解他到底是做什么的。因为我从来没有做过自动化开发。


    当我有一点熟悉 FIS 以后我希望通过很细致的一步步的面向100%新手的教程,让一些前端基础不是很牢固的同行也能用上FIS 。(FIS 用在正式开发流程中确实完爆 Gulp/Grunt)

    但我对 FIS 也还算是半知半解,只会简单的使用。我会维护这种入门文档,让基础理解了 FIS 后再引导读者去官网挖掘更深层的内容。

    希望 fansekey 能 watch fis-book 项目,当我介绍错使用方法时能及时改正。更希望这系列教程能真正帮助到很多初级前端后能直接贡献到 FIS 官网。

    #35
  • nimo

    @Yun.kou 嗯,百度内部应该用 fis-plus 会更多一些,这是一个基于 FIS 的解决方案,可能TA没找对地方。不过确实 FIS 官网文档有欠缺的地方,我们在加倍努力完善,感谢反馈。

    我是否可以这样理解:

    FIS 的解决方案等于是一份配置好的 gruntfile.js 和 gulpfile.js。基本上 fis 的使用者都应该积累封装一份适合自己团队的 FIS 解决方案。

    由架构师完成解决方案的封装后,使用者完全不用关心 FIS怎么配置,只需要关心编码和某些编码细节。

    基本的 fis-conf.js 最后都应该封装成解决方案。

    #36
  • fansekey

    @nimo

    基本上 fis 的使用者都应该积累封装一份适合自己团队的 FIS 解决方案。

    一直都是提倡这么做的

    FIS 的解决方案等于是一份配置好的 gruntfile.js 和 gulpfile.js。

    不一定只是配置好的一份配置文件,这个配置只是解决目录规范本身,还包括相对于不同后端的模块化开发方案、静态资源管理方案、测试环境的支持。

    #37
  • fansekey

    @nimo

    希望 fansekey 能 watch fis-book 项目

    已 STAR,会不定时融合进官网文档或者部分文章中

    #38
  • Jaylee

    赞一个先~

    #39
  • yolio2003

    赞赞赞,从类css的配置上看就已经好激动

    #40
  • onedayof2010

    FIS的文档比我读英文文档还费劲

    #41
  • fansekey

    @onedayof2010 FIS3 我们会加大对文档建设的投入,希望出来得到大家的喜欢和认可。

    另外 FIS 的文档后续也会更新一版。感谢对 FIS 的支持。

    #42
  • hahan2020

    fis是我见过的解决方案最彻底的,一看就爱上她了。
    fis3什么时候能正式推出?
    有js加密插件么?

    #43
微博登录后即可参与讨论。