RequireJs使用快速入门

前言:Requirejs作为一个ES5环境流行的模块加载器，在很多项目中使用它。而且这个开源库任然在更新，同类产品seajs已经不更新了。

ES6之后引入import 或者使用Commonjs的方式引入模块，在未来方向上将替换Requirejs是必然的。

一个产品是否选用ES6来开发仍然需要面临很多问题。

<1>.ES6还不能为浏览器全部识别，发布之前要编译，调试起来比浏览器上提示复杂得多。

<2>.应用ES6 必然要一定的高水平的开发资源，ES6 ,webpack等构建工具都需要一定的学习曲线。

<3>.老项目基本上很难迁移，那意味着很多组件很可能要重新书写。

所以requirejs任然是开源模块加载器首选。

 

一.Requirejs帮我们实现那些功能。

1.声明不同js文件之间的依赖

2.可以按需、并行、延时载入js库

3.可以让我们的代码以模块化的方式组织

 

二.一个简单的Requirejs的产品如何搭建

1.在html中引入Requirejs ,<script data-main="js/app.js" src="js/require.js"></script>

其中data-main中对应的路径是Requirejs配置的主入口， data-main和 src中路径都是相对html的路劲，或者是绝对路径

 

2.data-main文件内容，比如本例中的js/app.js文件

requirejs.config({
baseUrl:'js/lib',
paths :{
app:'../app'
}

});

require(["app/start"], function(app) {
app.hello();
});

 

2.1 baseUrl为模块(module)的根目录，如果require(依赖) 的模块直接是用文件名作为id的会直接在这个目录寻找同名文件资源

2.2 paths 中的属性可以给不同的路径或者文件别名，如果require(依赖) 的模块使用路径作为id的时候可以 通过别名匹配path中路径,

 

3.定义模块(module)

requirejs提供了多种定义模块的方式，可以使用/不使用依赖，返回变量，返回对象，函数，可使用CommonJs的方法在export,module中返结果

本例中是定义了一个无依赖的模块

define([], function() {
return {
hello: function() {
alert("hello, world");
}
}
});

 

还有一种定义了模块id 的定义方式，如:jquery源代码中的，申明过id的不能直接使用path定义其他别名访问

if ( typeof define === "function" && define.amd ) {
define( "jquery", [], function() {
return jQuery;
} );
}

 

 

4.shim配置: 将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用

如官网中例子 ，把backbone.js引入抛出Backbone作为模块名引入，dept中申明它需要的依赖，backbone依赖underscore 和jquery

requirejs.config({
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
}
}
});

 

对于不依赖于requirejs的库， 除了把js改为require.js的amd方式书写,还能使用shim来抛出全局对象。

/* util.js */
function util(){
　　alert("i am util");
}

/** app.js **/

requirejs.config({
baseUrl:'js/lib',
paths :{
app:'../app',
util:'../util'
},
shim:{
util: { exports: 'util' }
}
});

require(["util"], function(util) {
util();
});

 

暴露多个全局函数

/* util.js */

function util() {
alert("hello, util~");
}
function util2() {
alert("hello, util2~");
}

/** app.js **/

requirejs.config({
baseUrl:'js/lib',
paths :{
app:'../app',
util:'../util'
},
shim:{
util: {
init: function() {
return {
util: util,
util2: util2
}
}
}
}
});

require(["util"], function(util) {
util.util();
util.util2();
});

 

5.关于打包压缩，requirejs官方提供了一套打包工具r.js 只要配置对应的build.js可以帮助我们自动化构建

具体例子 https://github.com/volojs/create-template

build.js如何配置可以参考 Richard Chen的翻译 http://www.chenliqiang.cn/node/22

官网配置说明http://requirejs.org/docs/optimization.html

 

5.1 构建js

{
    "appDir": "../www",  //打包前目录
    "mainConfigFile": "../www/app.js",  //打包入口文件
    "dir": "../www-built",  //打包后生成文件
    "modules": [   //注意如果要分包，把依赖和主文件分开，需参考modules 第⑶种配置
        {
            "name": "app"   //指定生产文件的文件名
        }
    ]
}

运行命令

node tools/r.js -o tools/build.js

 

 

5.2构建css文件

需要一个css文件使用@import 包含所有依赖的css文件，

@import "bootstrap.min.css";  
@import "font-awesome.min.css";  
@import "main.css";  



node build/r.js -o cssIn=../www/css/styles.css out=../www-built/css/all.css optimizeCss=standard  

 

 如果构建多页面，以及构建多页面使用shim的，请参考官网例子

https://github.com/requirejs/example-multipage

https://github.com/requirejs/example-multipage-shim

 主要是配置modules来处理模块加载，分包，给页面和资源文件重命名。

 

6.关于插件(Plugins) ,Requirejs官方提供了5个插件 domReady  il8n  text  step  order

其中 step  order在新版本中已经不支持了，il8n做国际化的，domReady  勇于引入其他amd加载器。

text.js 可以配置依赖css ,htm等模版文件，支持html或者模版ajax加载，我和我工作过的一家公司用过这个插件，多模块化十分好用，后台系统可以经常让用户清空缓存的可以用

但是用r.js来构建的时候会悲剧，最主要的是css合并的问题，使用这种方式加载css合并后十分不友好的，毕竟css都是颗粒加载经来的，发布新版本css资源文件为了防止缓存经常会使用路径加版本号，或者文件md5改名，

https://github.com/requirejs/requirejs/wiki/Plugins