requirejs和r.js的心得

requirejs的GitHub：requirejs

r.js的GitHub：r.js

grunt-contrib-requirejs的GitHub：grunt-contrib-requirejs

1. requirejs的一個典型配置，main.js

   require.config({
       shim: {
           '$': {
               exports: 'Zepto'           //zepto.js里面暴漏的全局變量
           },
           '_': {
               exports: '_'
           },
           'B': {
               deps: [
                   '_'                           //依賴關系
               ],
               exports: 'Backbone'
           }
       },
       paths: {
           '$': 'zepto',                     //配置路徑
           '_': 'underscore',
           'B': 'backbone'
       }
   });
   requirejs(['$','1'], function(b) {
     debugger;
   });

   關於config.shim.exports這里有很好的解釋：shim.exports

2. r.js的使用方法

   node r.js -o baseUrl=src name=main out=dist/build.js optimize=none

   這樣用的話config.paths里面main.js里面的paths配置會無效，看這里的解釋：

   r.js optimizer does not load paths defined by a require.config

3. 關於第2點寫兩遍paths是重復勞動，r.js里面有一個mainConfigFile參數，將命令行改成這樣

   node r.js -o name=main mainConfigFile=src/main.js out=dist/build.js optimize=none

   為什么name和mainConfigFile都指向main呢，因為工程里配置文件和啟動文件都是main.js，我們完全可以分開放，

   src/config.js：

   require.config({
       shim: {
           '$': {
               exports: 'Zepto'
           },
           '_': {
               exports: '_'
           },
           'B': {
               deps: [
                   '_'
               ],
               exports: 'Backbone'
           }
       },
       paths: {
           '$': 'zepto',
           '_': 'underscore',
           'B': 'backbone'
       }
   });

   src/main.js：

   requirejs(['$','1'], function(b) {
     debugger;
   });

   然后運行：

   node r.js -o name=main mainConfigFile=src/config.js out=dist/build.js optimize=none

   r.js的配置文件說明看這里

4. requirejs里嵌套依賴的問題：
   如果main.js不是這樣依賴於1.js，而是像下面這樣：

   requirejs(['$'], function(b) {
     requirejs(['1'],function() {
     });
   });

   那么用r.js生成的文件里是不會包含1.js的內容的，這種情況下要加上參數findNestedDependencies

   node r.js -o mainConfigFile=src/config.js name=main out=dist/build.js optimize=none findNestedDependencies=true

5. 引用外部js的問題
   

   require.config({
       shim: {
           '$': {
               exports: 'Zepto'
           },
           '_': {
               exports: '_'
           },
           'B': {
               deps: [
                   '_'
               ],
               exports: 'Backbone'
           }
       },
       paths: {
           '$': 'http://apps.bdimg.com/libs/zepto/1.1.4/zepto',
           '_': 'underscore',
           'B': 'backbone'
       }
   });

   zepto引用外部的js文件了，r.js無法訪問

   $ node r.js -o mainConfigFile=src/config.js name=main out=dist/build.js optimize=none findNestedDependencies=true
   
   Tracing dependencies for: main
   Cannot optimize network URL, skipping: http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js
   
   E:/chengzhichao/tmp/test_grunt/dist/build.js
   ----------------
   E:/chengzhichao/tmp/test_grunt/src/1.js
   E:/chengzhichao/tmp/test_grunt/src/main.js

    r.js只把main.js,1.js弄到了build.js里面，這種情況下應該怎么辦呢？
   a.忽略zepto.js的path
   b.將config.js包含進生成的build.js里面

   node r.js -o mainConfigFile=src/config.js name=main out=dist/build.js optimize=none findNestedDependencies=true include=config.js paths.$=empty:

6. grunt-requirejs配置基本照搬r.js的配置