fis3学习

最近新起了一个项目,准备用fis作为构建工具,于是就把一些依赖的AMD模块拿过来准备用fis-AMD 构建一下 。。。。。。然后折腾了一天。。发现搞不定,然后求助hefangshi哥哥xiangshouding哥哥。。。最后换成了Commonjs的规范不用requirejs加载器了。。换成modjs

前奏完了。。下面说怎么改造amd模块变成modjs加载的

  1. 先上一个我的文件目录结构fis3学习 第1张

  2. 再上一个我的fis-conf点击这里查看

先安装以下插件

npm install fis-postprocessor-amd -g
npm install fis-postpackager-autoload -g
npm install fis-packager-depscombine -g
npm install fis-postprocessor-require-async -g
npm install fis-postpackager-simple -g

下面来个简单的示例

  1. commonjs的模块定于如下

    define(id,  function(require, exports, module){	 
    	 module.exports={};//暴露的接口
    });
  2. 我们先写一个简单的html代码如下:


    <!doctype html>
    <html>
    	<head>
    		<title>一个简单的fis模块化的demo</title>
    	</head>
    	<body>
    		<h1>一个简单的demo</h1>
    		<p>随便写点东西</p>
    		<script src="static/libs/mod.js"></script>
    		<script src="static/libs/vue.min.js"></script>
    		<!--下面这个注释是放编译后的js的位置的-->	
    			<!--SCRIPT_PLACEHOLDER-->
    			<!--RESOURCEMAP_PLACEHOLDER-->
    		<script>
    			var index = require("index");
    			index.init("我的测试理解意思就行");
    		</script>
    	</body>
    </html>
  3. html里引入了modjs和vuejs ,

    然后require了一个index模块,代码如下

    		/* global define */
    //define("index",  function(require, exports, module){
    	var b = require("myAlert");
    	var o = {};
    	var name="myname";
    	o.init = function(str){
    		b.confirm(name+str);
    	}
    	o.Date  = new Date();
    	 module.exports=o;
    //});
  4. index模块依赖了myAlert模块,代码如下


    		/* global define */
    //define("myAlert",  function(require, exports, module){
    //这个define可以不写编译的时候fis会自动帮你加上,
    	 var o = {};
    	 o.confirm = function(str){
    		 //xxxx这里写自己一些业务逻辑
    		 return confirm(str);
    	 };
    	  module.exports=o;
    //})
  5. 下面看fis-conf.js

     fis.config.merge({
    	statics : 'static',
    	modules : {
    		parser : {
    			less : 'less',
    			tmpl : 'utc'
    		},
    		postprocessor : {
    			js : "jswrapper, require-async",
    			html : "require-async"
    		},
    		postpackager : ['autoload', 'simple'],
    		lint : {
    			js : 'jshint'
    		}
    	},
    	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
    			}
    		}
    	}
    });
    //merge这一堆都是从fis-pure里抄过来的。。。。具体啥意思。。。我也不知道。。。
    fis.config.set('roadmap.path', [
    
        // {
            // reg: /libs/i,
    		// isMod:false
            // release: false
        // },
    	
        // 标记 isMod 为 true, 这样,在 modules 里面的满足 commonjs 规范的 js 会自动包装成 amd js, 以至于能在浏览器中运行。
        //
        {
            reg: /js/([^/]+)/([^.]+).js$/i,
            isMod: true,
            id: "$2",//模块的id
            release: '/static/js/$1/$2.js'//这里是产出的文件引用路径
        }
    ]);
  6. 打开cmd 到你的项目文件夹,执行fis release -m -d ../output

    如果遇到找不到什么扩展包之类的就挨个装吧或者参考https://github.com/fex-team/fis-amd-demo这个先把需要的包都装上

  7. 继续执行fis server start --root D:/fis_work/output  就可以看编译后的项目了,(D:/fis_work/output 是我的这个项目目录)

  8. 点击这里下载demo

看了这个简单的demo那么我们把amd加载的模块换成fis构建+modjs加载的只需要以下步骤

  1. 你的amd模块可能是这么写的


    define(["a","b","c","d"],function(a,b,c,d){
    	var o = {};
    	//xxxxxx
    	return o;
    });

    我们改成这样

    //去掉define的这个方法,因为fis构建的时候回帮你加上//define(id,  function(require, exports, module){
    var a = require("a");
    var b = require("b");
    var c = require("c");
    var d = require("d");
    var o = {};
    //xxxxx一堆逻辑不用改
     module.exports=o;
     //})别忘了去掉最下面的这个玩意
  2. 然后配置你的fis-conf.js

    fis.config.set('roadmap.path', [
    
        // {
            // reg: /libs/i,
    		// isMod:false
            // release: false
        // },
    	
        // 标记 isMod 为 true, 这样,在 modules 里面的满足 commonjs 规范的 js 会自动包装成 amd js, 便于于能在浏览器中运行。
        //
        {
            reg: /js/([^/]+)/([^.]+).js$/i,//这里是根据你自己得目录结构来自己写对应的正则
            isMod: true,
            id: "$2",//加载的模块的id
            release: '/static/js/$1/$2.js'//这里是产出的文件引用路径==发布路径
        }
    ]);
  3. 执行fis构建命令 fis release -m -p -o -d ../your path

最后感谢鼎爷和硬老师的亲口教导,孜孜不倦,很稀饭

下面是他们的github,大家有问题问他们

https://github.com/hefangshi

https://github.com/xiangshouding

参考资料

  1. 	//放css的地方
    	<!--STYLE_PLACEHOLDER-->
    	//放js的地方
    	<!--SCRIPT_PLACEHOLDER-->
    <!--RESOURCEMAP_PLACEHOLDER-->
  2. https://github.com/fex-team/fis-amd-demo

  3. http://fis.baidu.com/docs/beginning/getting-started.html

  4. fis-前端模块化

  5. https://github.com/fex-team/fis-pure

本文标题:fis3学习
本文链接:https://56way.com/p/55.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。