fis3学习
最近新起了一个项目，准备用fis作为构建工具,于是就把一些依赖的AMD模块拿过来准备用fis-AMD 构建一下 。。。。。。然后折腾了一天。。发现搞不定,然后求助hefangshi哥哥和xiangshouding哥哥。。。最后换成了Commonjs的规范不用requirejs加载器了。。换成modjs
前奏完了。。下面说怎么改造amd模块变成modjs加载的
-
先上一个我的文件目录结构
-
再上一个我的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
下面来个简单的示例
-
commonjs的模块定于如下
define(id, function(require, exports, module){ module.exports={};//暴露的接口 }); -
我们先写一个简单的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>
-
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; //}); -
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; //}) -
下面看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'//这里是产出的文件引用路径 } ]); -
打开cmd 到你的项目文件夹，执行fis release -m -d ../output
如果遇到找不到什么扩展包之类的就挨个装吧或者参考https://github.com/fex-team/fis-amd-demo这个先把需要的包都装上
-
继续执行fis server start --root D:/fis_work/output 就可以看编译后的项目了，(D:/fis_work/output 是我的这个项目目录)
看了这个简单的demo那么我们把amd加载的模块换成fis构建+modjs加载的只需要以下步骤
-
你的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; //})别忘了去掉最下面的这个玩意 -
然后配置你的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'//这里是产出的文件引用路径==发布路径 } ]); -
执行fis构建命令 fis release -m -p -o -d ../your path
最后感谢鼎爷和硬老师的亲口教导，孜孜不倦，很稀饭
下面是他们的github，大家有问题问他们
https://github.com/xiangshouding
参考资料
-
//放css的地方 <!--STYLE_PLACEHOLDER--> //放js的地方 <!--SCRIPT_PLACEHOLDER--> <!--RESOURCEMAP_PLACEHOLDER-->
发表评论