上面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. python标准库介绍

    操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...

  2. 管子&小白

    管夷吾已入朝,稽首谢罪,桓公亲手扶起,赐之以坐.夷吾曰:“臣乃俘戮之余,得蒙宥死,实为万幸,敢辱过礼!”桓公曰:“寡人有问于子,子必坐,然后敢请."夷吾再拜就坐. 桓公曰:“齐,千乘之国,先 ...

  3. ASP.NET MVC4中用 BundleCollection使用问题手记

    ASP.NET MVC4中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Si ...

  4. Intent Flag(转)

    转载自 http://blog.csdn.net/berber78/article/details/7278408 一. intent.setFlags()方法中的参数值含义: 1.FLAG_ACTI ...

  5. 遍历ModelState中存储的错误信息

    在服务器端验证中,有时我们添加了一个ModelError,然后还需要将该信息以JS的形式返回到客户端.如: [HttpPost] public ActionResult Index(LogOnMode ...

  6. 2014年最大福利：185个Google排名因素！免费电子书下载

    本博开张以来最大规模的干货放送!新手老手都有用! 不要再去追求PR了,不要再去发博客发论坛发外链了! 关注真正有用的Google排名因素! 整整185项,每一项都附带说明,必要的地方会给出一些附加的阅 ...

  7. 【tips】判断两个整数是否是同一个数量级

    leetcode刷题的时候,需要用到,已知整数A,B,且A>B,判断AB是否是同一数量级的. 第一想到的是不停地除以10,得到每个数字的数量级再进行比较,太麻烦: 转而向转化成字符串比较,还是麻 ...

  8. 10 Golden Rules of Project Risk Management

    The benefits of risk management in projects are huge. You can gain a lot of money if you deal with u ...

  9. sqlserver 中server 函数GETDATE(),DEFAULT用法

    alter table Persons add datenow date DEFAULT GETDATE() null, datetimenow datetime DEFAULT GETDATE()n ...

  10. Java 日志管理最佳实践

    转:http://blog.jobbole.com/51155/ 日志记录是应用程序运行中必不可少的一部分.具有良好格式和完备信息的日志记录可以在程序出现问题时帮助开发人员迅速地定位错误的根源.对于开 ...