IT►学习笔记

学习F.I.S前端工具框架

NPM清单

fex-team/fis

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。

  • 检查安装：npm view fis version
  • 工具安装：npm install -g fis

fouber/fis-postpackager-modjs

a postpackager plugin for fis to process map.json and create map.js for modjs

  • 检查安装：npm view fis-postpackager-modjs version
  • 工具安装：npm install -g fis-postpackager-modjs

fis-conf.js配置

//file : fis-conf.js
fis.config.set('modules.postpackager', 'modjs');
//settings
fis.config.set('settings.postpackager.modjs.subpath', 'pack/map.js');

fouber/fis-parser-less

A parser for fis to compile less file.

  • 检查安装：npm view fis-parser-less version
  • 工具安装：npm install -g fis-parser-less

clippit/fis-parser-dot

FIS Parser for doT.js template engine

  • 检查安装：npm view fis-parser-dot version
  • 工具安装：npm install -g fis-parser-dot

fex-team/fis-postprocessor-jswrapper

A postprocessor plugin for fis to wrap javascript with closure or amd define.

fis-conf.js配置

fis.config.merge({
    settings : {
        postprocessor : {
            jswrapper : {
                //wrap type. if omitted, it will wrap js file with '(function(){...})();'.
                type : 'amd',
                //you can use template also, ${content} means the file content
                //template : '!function(){${content}}();',
                //wrap all js file, default is false, wrap modular js file only.
                wrapAll : true
            }
        }
    }
});

或者通过 roadmap.path 局部配置

fis.config.set('roadmap.path', [
    {
        reg: '/page/**.js',
        jswrapper: {
            //wrap type. if omitted, it will wrap js file with '(function(){...})();'.
            type : 'amd',

            //you can use template also, ${content} means the file content
            //template : '!function(){${content}}();'
        }
    }
]);

fex-team/fis-spriter-csssprites

基于FIS的csssprites，对css文件,以及html文件css片段进行csssprites处理。支持repeat-x, repeat-y, background-position 和 background-size

依赖native插件node-images(xiangshouding/node-images)

  • 检查安装：npm view fis-spriter-csssprites version
  • 工具安装：npm install -g fis-spriter-csssprites

fex-team/fis-packager-depscombine

当设置 pack 的时候，同步依赖也会自动被打包进来。

  • 检查安装：npm view fis-packager-depscombine version
  • 工具安装：npm install -g fis-packager-depscombine

fis-conf.js配置

fis.config.set('modules.packager', 'depscombine');

hefangshi/fis-postpackager-simple

用于自动打包页面零散资源和应用打包资源的FIS插件

  • 自动将页面中声明的资源引用替换为pack中设置的资源
  • 自动将未打包的零散资源按照引用顺序打包，默认关闭

fouber/fis-parser-utc

A parser for fis to compile underscore template.

  • 检查安装：npm view fis-parser-utc version
  • 工具安装：npm install -g fis-parser-utc

F.I.S打包的特点

  • 一个资源不能被打包到多个包里面
  • fis的打包实际上是在建立一个资源表，并将其描述并产出为一份map.json文件，用户应该围绕着这份描述文件来设计前后端运行框架，从而实现运行时判断打包输出策略的架构。
  • 如果只要简单实现all-in-one打包，直接使用hefangshi/fis-postpackager-simple，会把pack设置之外的零碎文件打成一个。不设置pack，所有的零碎文件都打包成了一个。

参考链接