FIS应用实例-require.js+CMD模块

IMWeb前端团队

发布于 2019-12-03 17:21:18

1.5K0

发布于 2019-12-03 17:21:18

文章被收录于专栏：IMWeb前端团队IMWeb前端团队

本文作者：IMWeb 陈映平原文出处：IMWeb社区 未经同意，禁止转载

前面文章讲了FIS的源码实现细节，这篇文章偏实战一些，给出FIS跟require.js结合的简单例子。

FIS编译流程

如果已熟悉了FIS的编译设计，可以跳过这一节，直接进入下一小结。FIS的编译主要有三步：

命令解析-->资源编译-->资源部署

资源编译：FIS将文件资源抽象成File实例，该实例上有文件资源类型、id、内容、部署路径等的属性。对于文件的编译，实际上都是对File实例进行操作，比如修改资源的部署路径等（内存里操作）。
资源部署：根据File实例的属性，进行实际的部署动作（磁盘写操作）。

FIS的这套编译体系，使得基于FIS的扩展相对比较容易。在扩展的同时，还可以确保编译的高性能。针对资源编译环节的扩展，除非是设计不合理，不然一般情况下不会导致性能的急剧降低。

getting started

啰嗦的讲了一大通，下面来点半干货。喜欢require.js，但又喜欢用CMD编写模块的朋友有福了，下面会简单介绍如何整合require.js与FIS。

demo已经放在github，下载请猛戳。

首先看下项目结构。modules目录里的是模块化的资源，lib目录里的是非模块化资源。其中：

index.html依赖require.js来实现模块化管理
index.js模块依赖util.js模块
index.js、util.js均采用CMD规范

也就是说，本例子主要实现的，就是CMD到AMD的转换。

.
├── fis-conf.js
├── index.html
├── lib
│   └── require.min.js
└── modules
    ├── index.js
    └── util.js

资源概览

首先，我们看下index.html，引用了require.min.js，并加载了modules/index模块，跟着执行回调，没了。

<!DOCTYPE html>
<html>
<head>
    <title>CMD to AMD</title>
</head>
<body>

<script type="text/javascript" src="lib/require.min.js"></script>
<script type="text/javascript">
    require(['modules/index'], function(mod){
        mod('capser');
    });
</script>
</body>
</html>

接下来，我们看下index.js。也很简单，加载依赖的模块modules/util，接着暴露出本身模块，其实就是调用Utill模块的方法deubg。

var Util = require('modules/util');

module.exports = function(nick) {

    Util.debug(nick);
};

再看看uti.js，不赘述。

module.exports = {
    debug: function(msg){
        alert('Message is: ' + msg);
    }
};

如果换成熟悉的AMD，index.js应该是这样子的。那么思路就很清晰了。对CMD模块进行define包裹，同时将模块的依赖添加进去。

defind(["modules/util"], function(Util){

    return function(msg){
        Util.debug(msg)
    };
});

作为一枚贴近前端实践的集成解决方案，FIS早已看穿一切。下面进入实战编码环节。

实战：修改fis-conf.js

首先，打开fis-conf.js，加入如下配置。配置大致意思是：

在postprocessor环节，针对js文件，调用fis-postprocessor-jswrapper进行处理。
postprocessor插件的配置看settings.postprocessor，type为AMD，表示对模块进行AMD包裹。

fis.config.merge({
    modules: {
        postprocessor: {
            js: ['jswrapper']
        }
    },
    settings: {
        postprocessor : {
            jswrapper : {
                type: 'amd',
                wrapAll: false
            }
        }
    }
});

接着，添加roadmap.path配置。直接看注释，如果对配置不熟悉，可参考官方文档。

fis.config.merge({
    roadmap: {        
        path: [
            {
                reg : /^\/(modules\/.+)\.(js)$/i,    // modules目录下的所有js文件
                isMod : true,  // isMod为true，表示资源是模块资源，需要进行模块化包裹
                id : '$1',  // 这里这里！！将资源的id替换成 reg 第一个子表达式匹配到的字符串，比如 /modules/index.js，id则为 modules/index
                release : '$&'  // 发布路径，跟当前路径是一样的，看正则。。
            }            
        ]
    },
    modules: {
        postprocessor: {
            js: ['jswrapper']
        }
    },
    settings: {
        postprocessor : {
            jswrapper : {
                type: 'amd',
                wrapAll: false
            }
        }
    }
});