<![CDATA[刘新修]]> http://pic1.liuxinxiu.com:80/index.php zh-cn http://pic1.liuxinxiu.com:80/requireJS_demo/ <![CDATA[requireJS在Node平台安装、创建build实例、JS模块化加载、打包]]> 刘新修 <admin@yourname.com> Sat, 28 May 2016 14:41:43 +0000 http://pic1.liuxinxiu.com:80/requireJS_demo/ 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 都可以加载依赖元素(都是用于加载依赖）
  32. 1. require 要用于加载类相关JS文件，build后不参与代码合并，所用到的资源只进行压缩，http自动请求其他文件.
  33. 2. define  真正意义上的模块化处理，load本文件及外文件内的代码片段，build后参与代码合并，http自动请求其他文件.
  35. ******************************************************************************************************/  
  36. /***********************************************************
  37. require(['afile','bfile','cfile'],function(a,b,c){
  38.     var x1=require("afile");
  39.     var x2=require("bfile");
  40.     var x3=require("cfile");
  42. });
  43. ***************************************************************/  
  44.   
  45. /**************************************************************
  46. define(['bfile'],function(b){
  47.     console.log('run c.js :'+b.color+','+b.width);
  48. });
  49. ***************************************************************/  
  50. requirejs(["http://code.liuxinxiu.com/php/Interface/getUserInfo.php?Jsoncallback=define"],  
  51.     function(data){  
  52.         //The data object will be the API response for the  
  53.         //JSONP data call.  
  54.         console.log(data);  
  55.     }  
  56. );  
  57.   
  58. require(['jquery'],function(){  
  59.     /***** 调用后写入你的jq代码 *****/  
  60.     $("body").attr("yy","111");  
  61. });  
  62.   
  63.   
  64.   
  65. /******************************************************************************
  67. require.config();
  68. 1. shim中exports定义好的函数可以用    （requirejs+define）引入并使用
  69. 2. shim中init定义好的函数则必须以用 （define）引入并使用
  71. *************************************************************************/  
  72. requirejs(['only'],function(only){  
  73.     only();  
  74. });  
  75.   
  76. define(['hello'],function(data){  
  77.     /***** 定义值直接取，函数直接调用 *****/  
  78.     console.log(data.uinfos);  
  79.     data.hello2();  
  80. });  

实例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 - ]]> http://pic1.liuxinxiu.com:80/requireJS_demo/#blogcomment <![CDATA[[评论] requireJS在Node平台安装、创建build实例、JS模块化加载、打包]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://pic1.liuxinxiu.com:80/requireJS_demo/#blogcomment