requirejs和r.js的心得

requirejs的GitHub：requirejs

r.js的GitHub：r.js

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

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

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

关于第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的配置文件说明看这里

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
```

引用外部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:

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

秒客网

requirejs和r.js的心得

相关文章