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的配置