转载

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

开篇

前面文章讲了 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 目录里的是非模块化资源。其中：

1. index.html依赖require.js来实现模块化管理

2. index.js模块依赖util.js模块

3. 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    }   } } });