首页 > 代码库 > requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】
requirejs 多页面,多js 打包代码,requirejs多对多打包【收藏】
这段代码来自
http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project
以前用 requirejs和r.js 也做过打包demo,
demo 大家懂得,1个页面10多个js。。。。。。。。
这次计划给公司的项目打包
因为一般情况下,大部分项目都是多页面很少有项目是单页面应用程序
而 r.js 默认打包支持两种情况
1 所有js文件打包到1个文件
2 在1的基础上可以给js按照模块分组,支持多个模块在1个js文件中
BUT 都是最终归结为1个js文件。。。。。。
但是这不是我想要的,我就想要一个页面相关的js打包成一个js文件包,每个页面都有自己的js文件包
方法很简单 基于grunt+grunt-contrib-requirejs
具体配置在这里https://github.com/qqqzhch/webfans/blob/master/Gruntfile.js
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | // r.js 打包 准备 var files = grunt.file.expand( ‘js/app/*/main.js‘ ); //读取要打包的js入口 一般都为 main的js var requirejsOptions = {}; //用来存储 打包配置的对象 //遍历文件 files.forEach( function (file) { var filenamelist = file.split( ‘/‘ ); var num = filenamelist.length; var filename = filenamelist[num - 2]; //获取目录名称,因为这里的文件名都是main的js requirejsOptions[filename] = { options: { baseUrl: "js/" , paths: { "text" : ‘lib/text‘ , "jquery" : ‘lib/jquery‘ , "backbone" : ‘lib/backbone‘ , "underscore" : ‘lib/underscore‘ , "Highcharts" : ‘lib/highcharts/highcharts‘ , "select2" : ‘lib/select2/select2‘ , "moment" : ‘lib/moment‘ , "jquery-ui" : ‘lib/jquery-ui/jquery-ui‘ , "jquery.cookie" : ‘lib/jquery.cookie‘ , "validate" : ‘lib/jquery.validate‘ , "metadata" : ‘lib/jquery.metadata‘ , "jsplumb" : "lib/jquery.jsPlumb" , "qtip" : ‘lib/qtip/jquery.qtip‘ , "nicescroll" : "lib/jquery.nicescroll" , "Htheme" : ‘lib/highcharts/theme‘ , ‘jquery.mousewheel‘ : ‘lib/jquery.mousewheel‘ }, optimizeAllPluginResources: true , name: ‘app/‘ + filename + ‘/main‘ , out: ‘js/appbuild/‘ + filename + ‘/main.js‘ } }; }); // |
通过观察我们可以发现,配置和r.js 的build.js 是一致的,然后按照文件名存贮到对象中,
对与和grunt的配置则简单多了
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //*****省略其他代码 requirejs: requirejsOptions }); // Default task(s). grunt.registerTask( ‘dev‘ , [ ‘compass:force‘ , ‘connect:server‘ , ‘watch‘ ]); grunt.registerTask( ‘dist‘ , [ ‘compass:force‘ ]); grunt.registerTask( ‘js‘ , [ ‘requirejs‘ ]); |
运行结果如下
观察每个打包后的js文件,发现根据依赖打包,果然强悍,做到了每个页面js的插件数量刚好满足这个页面的需求,做到每个页面的代码都是最少的,可见多对多打包还是挺不错的
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。