基于fis的前端模块化和工程化方案

2021-11-08 22:35:50

前端构建工具

面对日益复杂的前端环境以及前端技术、node技术的高速发展，前端的开发也越来越工程化，体系化，也就是出现了前端自动化构建工具。他们完成的任务目标基本是：

js，css,图片的自动压缩合并（图片也即是是自动sprite）
js，css,图片自动添加域名
js，css,图片自动添加md5或版本号
自动监听文件变化
sass/less/coffee等的自动编译
支持amd/cmd的模块开发，可自动文件依赖
可以部署文件
网页自动刷新
实时编译

成熟的前端构建工具也有很多，比如：Gulp.js，Grunt，webpark, fis等等，其他构建工具本人使用不多，本文主要是对fis的前端工程化和模块化的使用做详细介绍

关于fis

fis是百度研发的一套前端构建工具，拥有丰富的脚手架和组件仓库。因为fis是本人接触的最早的前端构建工具，所以一直沿用到了至今。

    注： 本文是针对fis2，基于fis3的配置和插件将在稍后给出

fis的前端工程化和模块化基础插件

1.自动打包合并插件

fis配置

//开始autoCombine可以将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine', true);
//开启autoReflow使得在关闭autoCombine的情况下，依然会优化脚本与样式资源引用位置
fis.config.set('settings.postpackager.simple.autoReflow', true);
fis.config.set('settings.postpackager.simple.output', 'pkg/mcren_${hash}');

作用

将html中分散的静态资源进行自动合并打包

应用举例：

原始文件

  <link rel="stylesheet" type="text/css" href="/css/mcren.css">
  <link rel="stylesheet" type="text/css" href="/site/index/index/index.css">

转换后

   <link type="text/css" rel="stylesheet" href="/pkg/mcren_7636e.css">

可以看到fis会自动合并多个css到同一个文件里，这个合并不仅仅适用于css，也同样适用与js，并且将自动把css文件放入header头，js放在body结束前，有了这个功能也就具备的模块化开发的大前提

fis的include功能

fis配置

默认支持，无须插件

作用

大家在使用模板的时候，肯定是少不了include功能的，即公共部分的文件引用。fis同样支持这个功能，而且借助与自动打包功能，include功能的作用也被放大的很多.(fis支持多级include)

应用举例

主模板文件

<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link rel="stylesheet" type="text/css" href="/css/mcren.css">
  <link rel="stylesheet" type="text/css" href="/site/index/index/index.css">
  <script type="text/javascript" src="/lib/mod.js"></script>
</head>

<body>
  <link rel="import" href="/widget/header-small/header.html?__inline">

次模版文件（header-small/header.html）

<link rel="stylesheet" type="text/css" href="header.css">
<div class="header">
    <div>
        <link rel="import" href="../loginstate/loginstate.html?__inline"><h1><a href="/">主页</a></h1>
    </div>
</div>
<script type="text/javascript">
    var jsfunc = require('jsfunc/jsfunc');
    jsfunc.init();
</script>

转换后

<!DOCTYPE html>
<html>

<head>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link type="text/css" rel="stylesheet" href="/pkg/mcren_7636e.css">
</head>

<body>
    <div class="header">
      <div>
          <div class="loginstate">
            <a href="/space">左盐</a> | <a href="javascript:void(0);">退出</a><img src="member.jpg" id="avatar" />
          </div>
           <h1><a href="/">名场</a></h1>
       </div>
    </div>

    <!--省略的html代码-->

<script type="text/javascript" src="/lib/mod.js"></script>
<script type="text/javascript">
    var jsfunc = require('jsfunc/jsfunc');
    jsfunc.init();
</script>
</body>

说明

可以看到，经过fis处理后，本来应该分散的css被组合放进了head头里，js被放在了body结束前，模板的html代码也正常引入了进去。

另外大家可以看到我模块的划分，header模块的html是引入css的，也就是说模块与模块之间以及模块和主体页面之间的css都是独立的，这样充分解耦，可以有效的解决css的维护问题，

图片雪碧

fis配置

fis.config.set('modules.spriter', 'csssprites');

作用

自动把css中的图片转换成雪碧图

应用举例

不写了，大家都懂的

ejs分析能力

fis配置

//tell fis that `.ejs` is a js file
fis.config.set('roadmap.ext.ejs', 'js');
//tell fis that parse `.ejs` file by using `fis-parser-ejs` plugin
fis.config.set('modules.parser.ejs', 'ejs');

作用

大家知道，写js打印html字符串到页面的时候，如果在js里面串接html字符串是一种很难受的体验，所以fis也就有了这个插件，这个插件可以给js方法添加引用ejs模板的能力，这里ejs的使用方法和原生的完全兼容

应用举例

js函数

function ejsEx() {
    var tpl = __inline('comment.ejs');
    var s = tpl({
        title: "我的ejs模板"
    });
    console.log(s);
}

ejs模板

<h1><%= title%></h1>

输出

<h1>我的ejs模板</h1>

目录结构

上面已经介绍了fis的模块化基础能力，现在开始实践fis的模块化开发能力。当然fis的amd/cmd，域名添加等等基础功能，这里没有叙述，您可以自行上官网查看学习

根目录

css //less生成的css文件

font //字体图标文件

img //公共图片

less

lib //系统类库

modules //常用的module

jquery

laydate

layer

pizzalayer

pizzatools //网站工具类

pizzaui //ui组件

store //本地化插件

xss //xss过滤插件

site //非模块的css，js

views //网页模板文件

widget //模块

head //头部模块

footer //底部模块

nav //菜单模块

fis-conf.js //fis配置文件

因为我的技术构架是：前端 + nodejs + api，所以使用这种目录结构，用户可根据自己的项目目录*更改。

说明

modules目录

modules都是工具类，只包含js，目录结构为：

---根目录
----modules
-----jquery
------jquery-1.11.3.min.js

引用方式为：require('文件夹名字')

require('jquery')

widget目录

widget目录都是网站模块，可包含js,css,html,图片目录结构为：

---根目录
----widget
-----loginstate
------loginstate.less
------loginstate.js
------loginstate.html
------loginstate.jpg

引用方式为：

<link rel="import" href="/widget/loginstate/loginstate.html?__inline">

一个模块的代码示例

loginstate.html代码

<link rel="stylesheet" type="text/css" href="loginstate.css">
<div class="loginstate">
    <a href="/space">左盐</a> | <a href="javascript:void(0);">退出</a><img src="member.jpg" id="avatar" />
</div>
<script type="text/javascript">
    var loginstate = require('loginstate/loginstate');
    loginstate.init();
</script>

loginstate.js代码

var $  = require('jquery');
var tools = require('pizzatools');
require('pizzalayer');
var loginState = new function() {
    var _self = this;
    /**
     * 打印登录状态
     * @return {[type]} [description]
     */
    _self.init = function() {
        var s = '';
        var id = tools.getCookie('id');
        if(id == '0' ) {//未登录
            s = '<a href="/login?f='+document.location.href+'" class="btn btn-primary">登录</a>    <a href="/reg" class="btn btn-primary">注册</a>';
        }
        else {
            s = '<a href="/space">' + tools.getCookie('nickname') + '</a> | <a href="javascript:void(0);" onclick="loginstate.loginout();">退出</a><img src="' + tools.siteData.url.avatar + tools.getCookie('avatar') + '!v1" id="avatar" />';
        }
        $('.loginstate').html(s);
    }
    /**
     * 退出登录
     * @return {[type]} [description]
     */
    _self.loginout = function() {
        $.ajax({
            type:'GET',
            url:'/index/loginout',
            success: function(msg) {
                var url = document.location.href.split('/');
                if(url[3] == 'space') {
                    document.location.href = '/';
                }
                else {
                    document.location.reload();
                }
            }
        })
    }
}
module.exports = loginState;

index.html代码

<div class="header">
    <div>
        <link rel="import" href="/widget/loginstate/loginstate.html?__inline"><h1><a href="/">主页</a></h1>
    </div>
</div>

由此前端模块化已经全部完成

所需插件

fis-postprocessor-require-async
fis-parser-ejs
fis-postpackager-autoload
fis-postpackager-simple

npm install 以上插件即可

fis-conf.js

结合我的项目，本人的配置文件如下。下载本配置文件并且安装好fis后，可以直接使用。（由于项目发展时间很长，配置文件已经显得啰嗦，如果大拿研究了fis，可自行优化自己的配置文件）

fis.config.set('livereload.port', 8136);
//use css sprites
fis.config.set('modules.spriter', 'csssprites');
//tell fis that `.ejs` is a js file
fis.config.set('roadmap.ext.ejs', 'js');
//tell fis that parse `.ejs` file by using `fis-parser-ejs` plugin
fis.config.set('modules.parser.ejs', 'ejs');
//set options if you need
//@see https://github.com/visionmedia/ejs#options
fis.config.set('settings.parser.ejs', {
    open: '<%',
    close: '%>'
});
//使用simple插件，自动应用pack的资源引用
fis.config.set('modules.postpackager', 'simple');
//开始autoCombine可以将零散资源进行自动打包
fis.config.set('settings.postpackager.simple.autoCombine', true);
//开启autoReflow使得在关闭autoCombine的情况下，依然会优化脚本与样式资源引用位置
fis.config.set('settings.postpackager.simple.autoReflow', true);
fis.config.set('settings.postpackager.simple.output', 'pkg/mcren_${hash}');

fis.config.merge({
    pack: {
        'pkg/base.js': ['/modules/jquery/*.js', '/modules/layer/*.js', '/modules/pizzalayer/*.js', '/modules/pizzatools/*.js'],
        'pkg/kindeditor.js': ['/widget/kindeditor/kindeditor-min.js']
    }
});

fis.config.merge({
    statics: '/public',
    modules: {
        postprocessor: {
            js: "jswrapper, require-async",
            html: "require-async"
        },
        postpackager: ['autoload', 'simple'],
        lint: {
            js: 'jshint'
        }
    },
    roadmap: {
        ext: {

        },
        path: [{
            reg: /^\/modules\/laydate\/(need|skins)\/.*\.(js|css|png|gif)$/i,
            useHash: false,
            isMod: false,
            release: '${statics}/$&',
            url: '$&'

        }, {
            reg: /^\/widget\/kindeditor\/(lang|plugins|themes)\/.*\.(js|css|png|gif)$/i,
            useHash: false,
            isMod: false,
            release: '${statics}/$&',
            url: '$&'

        }, {
            reg: /^\/lib\/(.*)\.(js)$/i,
            isMod: false,
            release: '${statics}/$&',
            url: '/lib/$1'
        }, {
            reg: /^\/font\/(.*)$/i,
            isMod: false,
            release: '${statics}/$&',
            url: '/font/$1'
        }, {
            reg: /^\/views\/(.*)$/i,
            useCache: false,
            release: '/views/$1'
        }, {
            //一级同名组件，可以引用短路径，比如modules/jquery/juqery.js
            //直接引用为var $ = require('jquery');
            reg: /^\/modules\/([^\/]+)\/(.*)\.(js)$/i,
            //是组件化的，会被jswrapper包装
            isMod: true,
            //id为文件夹名
            id: '$1',
            release: '${statics}/$&',
            url: '$0'
        }, {
            //组件化的webpart的js
            reg: /^\/(widget|site)\/(.*)\.(js)$/i,
            isMod: true,
            id: '$2',
            release: '${statics}/$&',
            url: '$&'
        }, {
            //modules目录下的其他脚本文件
            reg: /^\/modules\/(.*)\.(js)$/i,
            //是组件化的，会被jswrapper包装
            isMod: true,
            //id是去掉modules和.js后缀中间的部分
            id: '$1',
            release: '${statics}/$&',
            url: '/modules/$1'
        }, {
            //组件化的webpart的html
            reg: /^\/widget\/(.*)\.(html)/i,
            release: false
        }, {
            //组件化的webpart的css
            reg: /^\/(widget|site)\/(.*)\.(css|png|jpg)/i,
            release: '${statics}/$&',
            useSprite: true,
            url: '$&'
        }, {
            //其他css文件
            reg: /^(.*)\.(css|less)$/i,
            release: '${statics}/$&',
            url: '$&'
        }, {
            //前端模板
            reg: '**.ejs',
            //当做类js文件处理，可以识别__inline, __uri等资源定位标识
            isJsLike: true,
            //只是内嵌，不用发布
            release: false
        }, {
            reg: "map.js",
            release: "${statics}/"
        }, {
            reg: /.*\.(html|jsp|tpl|vm|htm|asp|aspx|php)$/,
            useCache: false,
            release: '${statics}/$&'
        }, {
            reg: "**",
            release: '${statics}/$&',
            url: '$&'
        }]
    },
    settings: {
        postprocessor: {
            jswrapper: {
                type: 'amd'
            }
        },
        lint: {
            jshint: {
                camelcase: true,
                curly: true,
                eqeqeq: true,
                forin: true,
                immed: true,
                latedef: true,
                newcap: true,
                noarg: true,
                noempty: true,
                node: true
            }
        }
    }
});

fis.config.merge({
    roadmap: {
        //所有静态资源文件都使用 http://s1.example.com 或者 http://s2.example.com 作为域名
        domain: 'http://static1.example.com, http://s2.example.com'
    }
});

fis.config.merge({
    project: {
        exclude: /.docx|.bak$|.bat$|.md$|.rar$$|^\/less\/*|.less$|^\/modules\/pizzaui\/pizzaui\/*/i
    } //排除压缩包，文档，和bak文件
});

来自： http://www.cnblogs.com/spnt/p/5112705.html

码农公寓

前端构建工具

关于fis

fis的前端工程化和模块化基础插件

1.自动打包合并插件

fis配置

作用

应用举例：

fis的include功能

fis配置

作用

应用举例

说明

图片雪碧

fis配置

作用

应用举例

ejs分析能力

fis配置

作用

应用举例

ejs模板

输出

目录结构

说明

modules目录

widget目录

一个模块的代码示例

loginstate.html代码

loginstate.js代码

index.html代码

所需插件

fis-conf.js

相关文章