requirejs是javascript的套件管理library ,使用於管理套件的相依性,其中載入方式有非同步和同步兩種方式。
以下是一個簡單的範例:
<!--file:index.html--> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script data-main="js/main" src="http://requirejs.org/docs/release/1.0.7/minified/require.js"></script> </body> </html>
當requirejs被載入的時候,會去讀取data-main的值,並且載入這隻script(js/main.js)。
//file:js/main.js (function(){ require.config({ baseUrl:"js", paths:{ order:"libs/order" } }); //require( dependencies ,callback ) //dependencies是載入的相關套件,參數為string array //當載入完畢會呼叫此function,callback為function //先載入完js/config.js,才會載入js/module2.js require(["order!config","order!module2"],function( config, module2 ){ console.log( "loaded " + module2.name ); console.log( "version : " + config.version ); }); }).call( this );
**require.config**可以配置一些設定,**baseUrl**指的是**include script**的起始路徑,而**paths**可以設定名稱,會直接對照路徑,就不需打一長串了。
其中**require**的第一個參數,是載入相關的套件,加**order!**指的會依序往下執行,第二個參數則是,當載入完成後,會呼叫的**function**。
//file:js/config.js define([],function(){ return { version:"production" }; });
define function的第一個參數與require function相同,都是用來載入相關package用,而第二個參數當載入完後,return的直將會傳給require的callback function。
//file:js/module1.js define([],function(){ return { name:"module1" }; });
//file:js/module2.js define(["module1"],function( module1 ){ console.log("loaded " + module1.name); return { name:"module2" }; });
而js/lib/order.js是當載入需要同步時,需要使用到的requirejs plugin,其他plugin可參考官方。
當要將js壓縮和合併成同一隻時,可以執行以下指令,他會參考build.js,這個配置檔(需先裝node.js和requirejs):
./build.sh