requirejs 多頁面，多js 打包代碼，requirejs多對多打包【收藏】

標籤：c   style   class   blog   code   a   

這段代碼來自

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的外掛程式數量剛好滿足這個頁面的需求，做到每個頁面的代碼都是最少的，可見多對多打包還是挺不錯的