fis学习

https://github.com/fex-team/fis-amd-demo

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

 

一个amd 打包压缩的fis-conf.js的配置,留作记录

 // 开起 autuload, 好处是,依赖自动加载。
fis.config.set('modules.postpackager', 'autoload');
fis.config.set('settings.postpackager.autoload.type', 'requirejs');

// 设置成 amd 模式。
fis.config.set('modules.postprocessor.html', 'amd');
fis.config.set('modules.postprocessor.js', 'amd');
fis.config.set('settings.postprocessor.amd', {
    baseUrl: '.',

    // 查看:https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md#paths-
    // 不同的是,这是编译期处理,路径请填写编译路径。
    paths: {
        cube: '/js/cube.js',
       // bootstrap: 'modules/libs/bootstrap/js/bootstrap.js',
       // jqueryui: 'modules/libs/jquery-ui/ui/',
       // app: './modules/app',
       // css: './modules/css.js'
    },

    // 查看:https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md#packages-
    // 不同的是,这是编译期处理,路径请填写编译路径。
    packages: [
/*
        {
            name: 'zrender',
            location: 'modules/libs/zrender',
            main: 'zrender'
        },
*/
        {
            name: 'cube',
            location: 'js/cube.js',
            main: 'cube'
        }
    ],

    // 设置 bootstrap 依赖 jquery
    // 更多用法见:https://github.com/amdjs/amdjs-api/blob/master/CommonConfig.md#shim-
    // key 为编译期路径。
	/*
    shim: {
        'modules/libs/bootstrap/js/bootstrap.js': ['jquery']
    }
	*/
});

// 使用 depscombine 是因为,在配置 pack 的时候,命中的文件其依赖也会打包进来。
fis.config.set('modules.packager', 'depscombine');
//打包策略,libs
fis.config.set('pack', {
	/*
    'pkg/css/jqueyr-ui.css': [
        '/modules/libs/jquery-ui/themes/base/core.css',
        '/modules/libs/jquery-ui/themes/base/tabs.css',
        '/modules/libs/jquery-ui/themes/base/Datepicker.css',
        '/modules/libs/jquery-ui/themes/base/theme.css'
    ],
*/
    // js
    // 依赖也会自动打包进来, 且可以通过控制前后顺来来定制打包,后面的匹配结果如果已经在前面匹配过,将自动忽略。
    //'pkg/zrender.js': ['modules/libs/zrender/zrender.js'],
    //'pkg/echarts.js': ['modules/libs/echarts/echarts.js'],

   // 'pkg/bootstrap_jquery.js': ['modules/libs/bootstrap/js/bootstrap.js'],
   // 'pkg/cube.js': ['js/cube.js']
    'pkg/lib.js': [
        '/lib/mod.js',
        '/modules/underscore/**.js',
        '/modules/backbone/**.js',
        '/modules/jquery/**.js',
        '/modules/vendor/**.js',
        '/modules/common/**.js'
    ]
});

fis.config.set('roadmap.path', [

    {
        reg: //_[^/]*?$/i,
        release: false
    },

    // 标记 isMod 为 true, 这样,在 modules 里面的满足 commonjs 规范的 js 会自动包装成 amd js, 以至于能在浏览器中运行。
    //
    {
        reg: /^/modules/(.*.js)$/i,
        isMod: true,
        release: '/modules/$1'
    },
	 {
                //所有template目录下的.php文件
                reg : /^/template/(.*.php)/i,
                //是类html文件,会进行html语言能力扩展
                isHtmlLike : true,
                //发布为gbk编码文件
                charset : 'gbk',
                //发布到/php/template/xxx目录下
                release : '/php/template/$1'
            }
]);

折腾了好久AMD玩不转,换mod.js commonjs加载模式

conf.js配置如下

//var fis = module.exports = require('fis');
// 开起 autuload, 好处是,依赖自动加载。
//npm install fis-postpackager-require-async -g 
fis.config.merge({//merge这一堆是复制自fis-pure
	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
			}
		}
	}
});

fis.config.set('roadmap.path', [

    {
        reg: /libs/i,
        release: false//libs文件夹下的js不编译
    },{
        reg: /My97/i,
        release: false//my97这个控件不编译
    },
	 {
        reg: /static/css/([^.]+).css$/i,
        release:  '/static/new_bi/css/$1.css'//编译css对应的线上路径是/static/new_bi/css/xxx.css
    },
	
    // 标记 isMod 为 true, 这样,在 modules 里面的满足 commonjs 规范的 js 会自动包装成 amd js, 以便于能在浏览器中运行。
    //
    {
        reg: /^/static/js/([^/]+)/([^.]+).js$/i,
        isMod: true,
        id: "$2",
        release: '/static/new_bi/js/$1/$2.js'//$1 $2 正则捕获组的文件夹名称,$1对应的就是app文件夹和module文件夹 $2 对应的是文件夹下面的js文件名
    }
]);

模块代码格式如下

//首尾注释是因为fis编译之后会自动帮你加上myModuleName一般就是模块文件名,也就是上面的conf.js里的 id: "$2",这个玩意
//define("myModuleName",  function(require, exports, module){
	var page= require("page");
	var myTool=require("myTool");
	var o = {};
	o.init=function(){
		//xxxxx
	}
	 module.exports=o;
//})
本文标题:fis学习
本文链接:https://56way.com/p/45.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

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