requireJS在Node平台安装、创建build实例、JS模块化加载、打包

requireJS在Node平台上安装(推荐使用NodeJs绿色版环境套件):

C++代码
  1. npm install -g requirejs
  2. D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>npm install -g requirejs  
  3. npm http GET https://registry.npmjs.org/requirejs  
  4. npm http 200 https://registry.npmjs.org/requirejs  
  5. npm http GET https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz  
  6. npm http 200 https://registry.npmjs.org/requirejs/-/requirejs-2.2.0.tgz  
  7. D:\wmnp3\nodeJs\r.js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js  
  8. D:\wmnp3\nodeJs\r_js -> D:\wmnp3\nodeJs\node_modules\requirejs\bin\r.js  
  9. requirejs@2.2.0 D:\wmnp3\nodeJs\node_modules\requirejs  
  10.   
  11. D:\wmnp3\wwwroot\nodeJs\MVC\helloWorld>  

 

创建build.js (对应wmnp环境套件:D:\wmnp3\nodeJs\build\test.build.js)

JavaScript代码
  1. ({  
  2.     appDir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js',  
  3.     baseUrl:'test',  
  4.     dir:'../../wwwroot/nodeJs/MVC/helloWorld/public/js/test-built',  
  5.     paths:{  
  6.         jquery:'empty:'  
  7.     },  
  8.     modules:[  
  9.         {  
  10.             name:'b'  
  11.         },  
  12.         {  
  13.             name:'c'  
  14.         },  
  15.     ]  
  16. })  
  17.   
  18. /**********************************************
  19. "appDir": "./",     /**** 应用根路径 ****
  20. "dir": "dist",      /**** 打包的文件生成到哪个目录
  21. "optimize": "none", /**** 是否压缩 ****
  22. ***********************************************/  

实例1(对应wmnp环境套件:http://127.0.0.1:3000/test_page)::

JavaScript代码
  1. /***************************************************************
  2. require.config(); 等同于 requirejs.config();
  3. ***************************************************************/  
  4. requirejs.config({  
  5.     baseUrl:'/js/test',  
  6.     paths:{  
  7.         jquery:'../lib/jquery.min',  
  8.         hello:'hello',  
  9.         afile:'a',  
  10.         bfile:'b',  
  11.         cfile:'c',  
  12.     },  
  13.     shim:{  
  14.         only:{exports:'only'},  
  15.         /***** shim中hello源对应paths模块hello.JS *****/  
  16.         hello:{  
  17.         /***** 用exports导入当函数,必须换成 init 函数导入多个函数的文件 *****/  
  18.           init:function(){  
  19.             return{  
  20.               uinfos:"liuxinxiu",  
  21.               hello1:hello1,  
  22.               hello2:hello2  
  23.             }  
  24.           }  
  25.         }  
  26.     }  
  27. });  
  28.   
  29. /******************************************************************************************************
  30. require和define 都可以加载依赖元素(都是用于加载依赖)
  31. 1. require 要用于加载类相关JS文件,build后不参与代码合并,所用到的资源只进行压缩,http自动请求其他文件.
  32. 2. define  真正意义上的模块化处理,load本文件及外文件内的代码片段,build后参与代码合并,http自动请求其他文件.
  33. ******************************************************************************************************/  
  34. /***********************************************************
  35. require(['afile','bfile','cfile'],function(a,b,c){
  36.     var x1=require("afile");
  37.     var x2=require("bfile");
  38.     var x3=require("cfile");
  39. });
  40. ***************************************************************/  
  41.   
  42. /**************************************************************
  43. define(['bfile'],function(b){
  44.     console.log('run c.js :'+b.color+','+b.width);
  45. });
  46. ***************************************************************/  
  47. requirejs(["http://code.liuxinxiu.com/php/Interface/getUserInfo.php?Jsoncallback=define"],  
  48.     function(data){  
  49.         //The data object will be the API response for the  
  50.         //JSONP data call.  
  51.         console.log(data);  
  52.     }  
  53. );  
  54.   
  55. require(['jquery'],function(){  
  56.     /***** 调用后写入你的jq代码 *****/  
  57.     $("body").attr("yy","111");  
  58. });  
  59.   
  60.   
  61.   
  62. /******************************************************************************
  63. require.config();
  64. 1. shim中exports定义好的函数可以用    (requirejs+define)引入并使用
  65. 2. shim中init定义好的函数则必须以用 (define)引入并使用
  66. *************************************************************************/  
  67. requirejs(['only'],function(only){  
  68.     only();  
  69. });  
  70.   
  71. define(['hello'],function(data){  
  72.     /***** 定义值直接取,函数直接调用 *****/  
  73.     console.log(data.uinfos);  
  74.     data.hello2();  
  75. });  

实例2(对应wmnp环境套件:http://127.0.0.1:3000/test_load)::

JavaScript代码
  1. requirejs.config({  
  2.     baseUrl:'/js/test',  
  3.     paths:{  
  4.         "afile":'a?y=1',  
  5.         "bfile":'b',  
  6.         "cfile":'c',  
  7.         "core1":'cores/core1',  
  8.         "core2":'cores/core2',  
  9.         "util1":'utils/util1',  
  10.         "util2":'utils/util2',  
  11.         "service1":'services/service1',  
  12.         "service2":'services/service2',  
  13.     }  
  14. });  
  15.   
  16.   
  17. /***************************************
  18. ****************************************/  
  19. require(['c'],function(){  
  20.      //a();  
  21. })  

执行(压缩/打包):D:\wmnp3\nodeJs>node node_modules\requirejs\bin\r.js -o build\test.build.js

Tags:
NodeJs平台 | 评论(0) | 引用(0) | 阅读(1789)