微信扫描登录
或者
请输入您的邮件地址来登录或者创建帐号
提 交取 消
GITBOOK.CN需要您的浏览器打开cookies设置以支持登录功能

FIS3,大而全的前端工程化工具
作者:Kevin

简单的几行配置,即可使用前端工程化的基本功能;

支持的功能

  1. 内置插件,fis3内置了常用插件,免去了繁琐的插件安装

     fis-optimizer-clean-css    //用于压缩 css
     fis-optimizer-png-compressor    //用来压缩 png 文件,减少文件体积
     fis-optimizer-uglify-js    //用来压缩 js 文件,混淆代码,减少文件体积
     fis-spriter-csssprites    //图片合并 CssSprite
     fis3-deploy-local-deliver//用来支持 fis3 本地部署能力,将 fis3 编译产出到指定目录。
     fis3-deploy-http-push//用来支持 fis3 远程部署能力,将 fis3 编译通过 http post 方式发送到远程服务端。
     fis3-hook-components //支持通过fis3 install xxx 的方式,安装第三方库到本地的component
     fis3-packager-map    //用来支持 fis 简单的打包,无需额外设置,已自动开启。
    
  2. 内容嵌入,使用?__inline和__inline()即可将资源文件的内容嵌入,也可以将图片转换成base64后嵌入
  3. 图片合并 CssSprite

     // 启用 fis-spriter-csssprites 插件
     fis.match('::package', {
       spriter: fis.plugin('csssprites')
     });
     // 对 CSS 进行图片合并
     fis.match('*.css', {
       // 给匹配到的文件分配属性 `useSprite`
       useSprite: true
     });
     // 调用:使用命令 ?__sprite
     li.list-1::before {
       background-image: url('./img/list-1.png?__sprite');
     }
    
  4. 文件压缩

     fis.match('*.js', {
       // fis-optimizer-uglify-js 插件进行压缩,已内置
       optimizer: fis.plugin('uglify-js')
     });
     fis.match('*.css', {
       // fis-optimizer-clean-css 插件进行压缩,已内置
       optimizer: fis.plugin('clean-css')
     });
     fis.match('*.png', {
       // fis-optimizer-png-compressor 插件进行压缩,已内置
       optimizer: fis.plugin('png-compressor')
     });
    
  5. 添加时间戳,实现文件的强缓存

     fis.match('*.{js,css,png}', {
       useHash: true
     });
    
  6. 灵活的文件合并

     fis.match('/static/folderA/**.js', {
       packTo: '/static/pkg/folderA.js'
     });
     // 配置合并顺序;packOrder越小越在前面
     fis.match('/static/folderA/file1.js', {
       packOrder: -100
     });
    
  7. 安装第三方组件

    用来支持 短路径 引用安装到本地的 component。 如: fis3 install bootstrap 后,在页面中可以这么写。

     <link xxx href="bootstrap/css/bootstrap-theme.css" />
     <script src="boostrap/button.js"></script>
    
     <!--或者直接用模块化的方式引用 js-->
     <script type="text/javascript">
       require(['bootstrap', 'bootstrap/button']);
     </script>
    

    此功能已自动开启。

  8. FIS3 内置一个简易 Web Server,可以方便调试构建结果

     fis3 open    //打开服务所在文件夹
     fis3 start    //启动服务,默认为 http://127.0.0.1:8080
    
  9. 插件扩展

     lint:代码校验检查,比较特殊,所以需要 release 命令命令行添加 -l 参数
     parser:预处理阶段,比如 less、sass、es6、react 前端模板等都在此处预编译处理
     preprocessor:标准化前处理插件
     standard:标准化插件,处理内置语法
     postprocessor:标准化后处理插件
    
  10. 模块化

     var _map = __RESOURCE_MAP__; //js中打印资源映射表
    
     考虑到不可能一个框架运用多个模块化框架(因为全都占用同样的全局函数,互斥),所以编译支持这块分成三个插件进行支持。
     fis3-hook-commonjs
     fis3-hook-amd
     fis3-hook-cmd
    
  11. 支持node-glob配置

     FIS3 中支持的 glob 规则,FIS3 使用 node-glob 提供 glob 支持。
    
  12. 调试

     通过inspect可以查看整个打包过程的日志,如 fis3 inspect debug(第三个参数是用户定义的media),下面是打印的日志
    
      ~ /client/widget/search/search.less
      -- release /static/home/widget/search/search.css `/client/(**)`   (2th)
      -- id home:widget/search/search.less `/client/(**)`   (2th)
      -- moduleId home:widget/search/search.less `/client/(**)`   (2th)
      -- parser [plugin `less`] `/client/**.less`   (3th)
      -- rExt .css `/client/**.less`   (3th)
      -- isMod true `/client/{components,widget}/**.{js,es,ts,tsx,jsx,css,less}` (10th)                       
      -- useHash false `*`   (27th)
      -- optimizer null `*`   (27th)
      -- packTo widget.css `/client/widget/**.{css,less}`   (26th)
      -- deploy [plugin `http-push`] `*`   (27th)
    

三种语言能力

内容嵌入:将文件的内容嵌入;定位资源:获取资源的实际路径;声明依赖

  1. html

     内容嵌入
     <img title="百度logo" src="images/logo.gif?__inline"/>    //html中嵌入图片base64
     <link rel="stylesheet" type="text/css" href="demo.css?__inline">    //html中嵌入css
     <script type="text/javascript" src="demo.js?__inline"></script>    //html中嵌入脚本资源
     <link rel="import" href="demo.html?__inline">    //html中嵌入页面文件
     定位资源
     <img title="百度logo" src="images/logo.gif"/>
     <link rel="stylesheet" type="text/css" href="demo.css">
     <script type="text/javascript" src="demo.js"></script>
    
  2. js

     内容嵌入
     __inline('demo.js');    //在js中嵌入js文件
     var img = __inline('images/logo.gif');    //在js中嵌入图片base64
     var css = __inline('a.css');    //在js中嵌入css
     定位资源
     var img = __uri('images/logo.gif');
     var css = __uri('demo.css');
     var js = __uri('demo.js');
    
  3. css

     内容嵌入
     @import url('demo.css?__inline');    //內联嵌入css
     .style {background: url(images/logo.gif?__inline);}    //在css中嵌入图片的base64
     定位资源    
      @import url('demo.css');
    
  4. 声明依赖

     在html、css、js中支持通过注释注明依赖
     /**
      * @require demo.css
      * @require list.js
      */
    

多种web解决方案

  1. 针对smarty的方案 fis-smarty
  2. 针对nodejs的方案 yog2

总结

fis提供了简单的配置、强大的扩展功能,支持结合后端更好的实现组件化、模块化; 而且fis提供了特别详细的文档和demo

  1. 官方文档
  2. 全部插件
  3. 插件开发
  4. github
  5. demo汇总
  6. 常用属性和配置汇总
  7. 常用插件