RequireJS 客户端模块管理
最后更新于：2022-04-02 03:13:15
[TOC]
> [自制demo](https://github.com/idcpj/gulp_demo)
`define` 和 `require` 这两个定义模块、调用模块的方法，合称为AMD模式
## define方法创建模块
### 独立模块
方式一:
```
define({
method1: function() {},
method2: function() {},
});
```
方式二:
更灵活,可在 `return` 前放置代码
导出对象
```
define(function () {
return {
a: function() {},
b: function() {},
};
});
```
方式三:只导出一个模块
导出函数
```
define(function(){
return function(){
document.querySelector("body").innerHTML="asd"
}
});
```
### 非独立模块
方式一:
```
define(['module1', 'module2'], function(m1, m2) {
return {
method: function() {
m1.methodA();
m2.methodB();
}
};
});
```
方式二:
```
define(
function (require) {
var dep1 = require('dep1'),
dep2 = require('dep2'),
}
});
```
demo:通过判断浏览器是否为IE，而选择加载zepto或jQuery
```
define(('__proto__' in {} ? ['zepto'] : ['jquery']), function($) {
return $;
});
```
## 调用模块
```
require(['foo', 'bar'], function ( foo, bar ) {
foo.doSomething();
});
```
require方法也可以用在define方法内部
```
define(function (require) {
var otherModule = require('otherModule');
});
```
动态加载 require
```
define(function ( require ) {
var isReady = false, foobar;
require(['foo', 'bar'], function (foo, bar) {
isReady = true;
foobar = foo() + bar();
});
return {
isReady: isReady,
foobar: foobar
};
});
```
## 调用不支持 amd 的模块
c.js
```
var show = function(){
alert('调用了c');
}
```
配置config
```
shim : {
c : {
exports : 'show'
}
}
```
调用
```
require(['c'], function( c){
console.log(c);
});
```
## 配置 require.js 文件
```
require.config({
baseUrl: 'js/lib',
paths: {
jquery: [
'//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
'lib/jquery'
]
},
shim: {
"backbone": {
deps: [ "underscore" ],
exports: "Backbone"
},
"underscore": {
exports: "_"
}
}
});
```
1. baseUrl 基础路径
2. paths 可以有多个路径,如果一个加载不通,则加载第二个
3. shim:不支持 AMD 规范使用 `shim`, `deps` 指定依赖关系, `exprots` 指定输出符号
## 优化器r.js
例子:在根目录创建 `build.js`
```
({
appDir: '../src', //app源码的根目录
// baseUrl: "../src/js", //error: has a source path that is same as output
dir:"../release", //app发布代码的根目录，r.js把构建后的代码存放于此
mainConfigFile:'../src/js/config.js',
paths: {
one: "mod/one",
two: "mod/two",
three: "mod/three"
},
modules:[{ //合并策略，如one.js和two.js，合并成combine.js
name:"combine",
include:[
'one',
'two'
]
},
})
```
* **appDir**：项目目录，相对于参数文件的位置
* **baseUrl**：js文件的位置。
* **dir**：输出目录。
* **modules**：一个包含对象的数组，每个对象就是一个要被优化的模块。
* **fileExclusionRegExp**：凡是匹配这个正则表达式的文件名，都不会被拷贝到输出目录。
* **optimizeCss**: 自动压缩CSS文件，可取的值包括“none”, “standard”, “standard.keepLines”, standard.keepComments”, “standard.keepComments.keepLines”。
* **removeCombined**：如果为true，合并后的原文件将不保留在输出目录中。
* **paths**：各个模块的相对路径，可以省略js后缀名。
* **shim**：配置依赖性关系。如果某一个模块不是AMD模式定义的，就可以用shim属性指定模块的依赖性关系和输出值。
* **generateSourceMaps**：是否要生成source map文件。
## 例子
### 多页面应用例子
[guthub 官方例子](https://github.com/requirejs/example-multipage)
';