就在过去的若干月里面,FIS 团队和 @fouber 一起就 FIS 发布以来一年多的使用情况做了一些总结,并且对其不完善地方做了抽象,终于确定了 FIS 的下一代 FIS3。如今 FIS3 在 FIS 团队的努力下已经发布了! GitHub 地址:https://github.com/fex-team/fis3 那么 FIS3 到底有哪些新奇的地方; 之所以不是 FIS2 而是 FIS3 是由于已经开源的 FIS 前还有一个用 PHP 实现的 FIS,FIS 开源以来都被称为 FIS2.0。 2013 年上 FIS 在 @berg @walter @fouber 带领下的 FIS 团队的努力下诞生,并且解决了诸多前端工程问题以及给前端工程化一种新的思路。包括但不限于在模块化开发、自动化工具、资源加载、性能优化等等方面的突破。 FIS 通过对多年的前端项目的支持以及总结,发现前端语言不可或缺但是确实缺少的三种语言能力,资源内嵌、定位资源、依赖声明。有了这三种语言能力就可以漂亮的解决各种前端工程需求下的性能优化、模块化开发等等问题。 FIS 提供工具增加了这三种语言能力,并且给了一种资源加载管理的思路,基于静态资源表的静态资源管理方法,合理的解决了资源加载中的按需、同步/异步、依赖管理、缓存、合并、内嵌等工程问题。 FIS3 在 FIS 的基础上提升了易用性以及可扩展能力。用一种更简单的配置方法、更全面的插件扩展支持来为打造前端工程方案提供助力; FIS3 面向前端的工程构建系统,解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。 易于理解的配置 FIS3 提出了这样一种配置方式,它就像是 CSS 一样后面书写的规则会覆盖前面前面书写的规则,像 CSS 有一些固定的规则供用户设置;文件分配到的属性,将会在编译阶段决定此文件将如何处理。 当我们要完成这样一些事情 除了某些 js 文件 exclude.js 以外,其他的 js 文件都进行压缩。 // vi fis-conf.js fis.match('*.js', { optimizer: fis.plugin('uglify-js') }); fis.match('exclude.js', { optimizer: null }); 在开发阶段 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 对整个编译流程提供诸多事件,方便你做特定化需求;并且推出新的插件类型 hook,hook 插件会在编译之前做加载,可在其内部绑定一些事件来完成特定的需求,比如相对路径的支持。 其他特性 可扩展三种语言能力语法 方便易用的脚手架 支持 AMD、commonJS、Rosetta (web-components) 模块化方案 (插件提供) 模块化方案可自由定制 若干功能改进 watch 功能开启时,修改项目配置文件 fis-conf.js 即时生效,不再需要重启 $ FIS3 主要是用户易用性和扩展能力的提升,定位是方便那些做前端工程方案的用户能快捷的完成方案定制,我们不期待所有的人都能拿来即用,而我们期待的是 FIS3 真正能使你从折腾工具中解放出来,通过几行配置、依靠 FIS 社区能快速解决你遇到的工程问题。 扩展阅读 https://github.com/fex-team/fis/issues/312 https://github.com/fex-team/fis3-demo http://div.io/topic/439 http://div.io/topic/371 http://div.io/topic/745 via FEX FIS3 发布,来自百度的前端解决方案下载地址