上面release是执行命令 node r.js -o build.js 生成的，需要切换到目录require/tools下面，也就是 有r.js和build.js的目录，才能执行命令

代码目录如上：

main.html代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Hello RequireJS</title>

    </head>

    <body>

        <h1>Hello RequireJS</h1>

        <script type="text/javascript" src="js/lib/require.js"></script>

        <!-- main.js：requireJS 配置信息 -->

        <script type="text/javascript" src="js/config.js"></script>

        <!-- <script type="text/javascript" src="js/combine.js"></script> -->

        <script type="text/javascript">
          /*如果没有配置信息，加载one,two模块，要找到他们的存放路径*/

          /*  require(["./js/mod/one", "./js/mod/two"], function (one, two) {

                console.log('加载模块：', one.name, two.name );

                console.log("bootstrap the application");

            });*/

            require(["one", "two"], function (one, two) {

                console.log('加载模块：', one.name, two.name );

                console.log("bootstrap the application");

            });

        </script>

    </body>

</html>

config.js代码如下，配置信息，便于 require引入这些模块 one,two,three，如上代码

// requireJS的简单配置，更详细的配置信息请看 http://requirejs.org/docs/api.html#config

requirejs.config({

    baseUrl: "./js", //相对于当前 Html的路径

    paths: {

        one: "mod/one",

        two: "mod/two",

        three: "mod/three"

    }

});

one模块代码：

define(function(){

    return {name:"one"}

});

two模块代码：其中two模块引入了three模块

define(function(require){

    /*var three = require('./three');*/

    var three = require('three');

    console.log('加载模块：'+three.name);

    return {name:"two"}

});

three模块代码：

define(function(){

    return {name:"three"}

});

build.js是r.js压缩代码的依据,代码如下：

({

    appDir:"../src",

    dir:"../release",

    mainConfigFile:"../src/js/config.js",

    paths:{

        one:"mod/one",

        two:"mod/two",

        three:"mod/three"

    },

    modules:[{

        name:"combine",

        include:[

            'one',

            'two'

        ]

    }],

    optimize:"uglify" 

})

     appDir

　　应用程序的最顶层目录。可选的，如果设置了的话，r.js 会认为脚本在这个路径的子目录中，应用程序的文件都会被拷贝到输出目录（dir 定义的路径）。如果不设置，则使用下面的 baseUrl 路径。

　　baseUrl

　　默认情况下，所有的模块都是相对于这个路径的。如果没有设置，则模块的加载是相对于 build 文件所在的目录。另外，如果设置了appDir，那么 baseUrl 应该定义为相对于 appDir 的路径。

　　dir

　　输出目录的路径。如果不设置，则默认为和 build 文件同级的 build 目录。

　　optimize

　　JavaScript 代码优化方式。可设置的值：

  • "uglify：使用 UglifyJS 压缩代码，默认值；
  • "uglify2"：使用 2.1.2+ 版本进行压缩；
  • "closure"： 使用 Google's Closure Compiler 进行压缩合并，需要 Java 环境；
  • "closure.keepLines"：使用 Closure Compiler 进行压缩合并并保留换行；
  • "none"：不做压缩合并；

　　optimizeCss

　　CSS 代码优化方式，可选的值有：

  • "standard"：标准的压缩方式；
  • "standard.keepLines"：保留换行；
  • "standard.keepComments"：保留注释；
  • "standard.keepComments.keepLines"：保留换行；
  • "none"：不压缩；

　　mainConfigFile

　　如果不想重复定义的话，可以使用这个参数配置 RequireJS 的配置文件路径。

　　removeCombined

　　删除之前压缩合并的文件，默认值 false。

　　fileExclusionRegExp

　　要排除的文件的正则匹配的表达式。

　　modules

　　定义要被优化的模块数组。每一项是模块优化的配置，常用的几个参数如下：

　　　　name：模块名；

　　　　create：如果不存在，是否创建。默认 false；

　　　　include：额外引入的模块，和 name 定义的模块一起压缩合并；

　　　　exclude：要排除的模块。有些模块有公共的依赖模块，在合并的时候每个都会压缩进去，例如一些基础库。使用 exclude 就可以把这些模块在压缩在一个更早之前加载的模块中，其它模块不用重复引入。

代码目录如下

main-build.js,production都是运行 node r.js -o build.js生成的，需要切换到目录test/develop下面，也就是 有r.js和build.js的目录，才能执行命令

<!DOCTYPE html>

<html>

    <head>

        <title>My App</title>

       <!--  <link rel="stylesheet" type="text/css" href="css/main.css"> -->

        <script data-main="js/main-build" src="js/require.js"></script>

    </head>

    <body>

        <h1>My App</h1>

    </body>

</html>

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main。

build.js 如下：out是压缩为一个.js文件，dir是将本地代码，重新复制一份代码，作为上线代码，out和dir不能同时出现，同时使用会报冲突。

({

    baseUrl:'.',

    name:'main',

    paths:{jquery:'jquery/jquery-1.11.0.min'},

    out:'main-build.js'

    /*dir:'../production'*/

})

main.js 配置：方便require加载模块

理论上，require.js加载的模块，必须是按照AMD规范、用define()函数定义的模块。但是实际上，虽然已经有一部分流行的函数库（比如jQuery）符合AMD规范，更多的库并不符合。那么，require.js是否能够加载非规范的模块呢？

回答是可以的。

这样的模块在用require()加载之前，要先用require.config()方法，定义它们的一些特征。

举例来说，underscore和backbone这两个库，都没有采用AMD规范编写。如果要加载它们的话，必须先定义它们的特征。

require.config({

    paths:{

        jquery:'jquery/jquery-1.11.0.min'

    },

　    shim: {  
　　　　　　'underscore':{
　　　　　　　　exports: '_'
　　　　　　},

　　　　　　'backbone': {
　　　　　　　　deps: ['underscore', 'jquery'],
　　　　　　　　exports: 'Backbone'
　　　　　　}

　　　　}

})

require(['one','sub/three',jquery,_,Backbone],function(one,three){

   alert(one+three);

});

require.config()接受一个配置对象，这个对象除了有前面说过的paths属性之外，还有一个shim属性，专门用来配置不兼容的模块。具体来说，每个模块要定义（1）exports值（输出的变量名），表明这个模块外部调用时的名称；（2）deps数组，表明该模块的依赖性。

代码地址：https://github.com/lianbinghua/require

requireJs和r.js压缩工具的更多相关文章

  1. requirejs和r.js的心得

    requirejs的GitHub:requirejs r.js的GitHub:r.js grunt-contrib-requirejs的GitHub:grunt-contrib-requirejs r ...

  2. 转:requirejs打包压缩r.js使用示例

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  3. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  4. 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)

    这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...

  5. requirejs 使用实例r.js打包

    在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...

  6. requirejs原理深究以及r.js和gulp的打包【转】

    转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...

  7. requireJS中如何用r.js对js进行合并和压缩css文件

    我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...

  8. requireJS的优化工具 ---- r.js

    requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...

  9. requirejs的打包工具r.js

    不建议用命令行,还是用配置文件比较方便--build.js. 我的build.js文件内容大概如下: ( { appDir : './', baseUrl : './scripts', dir : ' ...

随机推荐

  1. zepto源码--extend--学习笔记

    对象继承函数: $.extend(){},默认传递一个参数,需要继承的对象目标.函数展示: 最终实现的过程,需要调用工具函数extend,首先分析extend函数. 默认传递三个参数,继承的目标对象- ...

  2. nodejs技术面试问题整理

    1.meteor 是如何解决多回调的问题 参考 http://www.cnblogs.com/meteorcn/p/MeteorJS_Async_Fiber_Future_Wrap.html 2.一个 ...

  3. Swift-07-析构器deinit

    析构器只适用于类类型,当一个类的实例被释放之前,析构器会被立即调用.析构器用关键字deinit来标识,类似于构造器用init来标识. 原理: Swift会自动释放不再需要的实例以释放资源.Swift通 ...

  4. 配置maven环境

    第一步:安装maven,安装maven最简单,直接将maven的解压文件放入本地某目录下即可,无需手动安装 第二步:eclipse中导入maven项目后,会后错,或maven无法使用,则需要进行mav ...

  5. js实例代码

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. RabbitMQ学习总结 第二篇：快速入门HelloWorld

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  7. Visual Studio 2013发布网站

  8. 如何激活一个window/dialog && 不能直接对Dialog Box使用SetFocus

    问题,症状: 程序的主窗口CMainWnd创建了一个modal dialog,希望这个dialog能接收WM_KEYDOWN消息,但是需要点一下这个dialog窗口它才能接收到(我嫌麻烦),而且我发现 ...

  9. Mybatis的批量CRUD

    CRUD与批量CRUD 分页前后缀(方言 Mysql与Oracle情况下不一样) 批量插入数据  http://chenzhou123520.iteye.com/blog/1583407/ 亟待完善 ...

  10. CentOS6.5 安装HAProxy 1.5.20

    [在CentOS下安装haproxy] sudo yum install haproxy 编辑配置文件 vim /etc/haproxy/haproxy.cfg #------------------ ...