上面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. 设计模式：状态模式（State）

    定  义:当一个对象内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式主要解决的是当控制一个对象状态转换的条件表达式过于复杂时的情况, 把状态的判断逻辑转移到表示不同状态的一系列子 ...

  2. struts.xml 配置详解

    struts.xml是我们在开发中利用率最高的文件,也是Struts2中最重要的配置文件. 一下分别介绍一下几个struts.xml中常用到的标签 1.<include> 利用includ ...

  3. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  4. windows2008一键安装环境的配置说明

    windows 2008 一键安装包下载地址为 http://gongdan.oss-cn-hangzhou.aliyuncs.com/market/cmISV/34320/product/cmgj0 ...

  5. 浅谈Java回调机制

    像许多网上介绍回调机制的文章一样,我这里也以一个现实的例子开头:假设你公司的总经理出差前需要你帮他办件事情,这件事情你需要花些时间去做,这时候总经理肯定不能守着你做完再出差吧,于是就他告诉你他的手机号 ...

  6. iOS 应用内跳转到appstore里下载

    SKStoreProductViewController类是UIViewController的子类, 如果你对view controller比较熟悉的话,那SKStoreProductViewCont ...

  7. iOS苹果开发者客服电话地址

    苹果开发者客服电话地址:https://developer.apple.com/contact/phone.php 中国大陆地区客服电话:4006 701 855 中国香港地区客服电话:(852) 2 ...

  8. SQLServer DMV Query

    1.DMV Query to identify all active SQL Server Sessions The query below identifies all currently acti ...

  9. zabbix使用tokudb引擎替换innodb引擎

    zabbix数据量大,数据量增长很快,使用tokudb可以更好的压缩 使用tokudb,用percona 或mariadb数据库 1.查看数据库版本 (1)登录数据库的时候可以看到 (2)status ...

  10. 构造方法后面加上了：base

    今天看公司软件的代码碰到一个奇怪的方法 ,寻早了各种方法后终于明白了,在构造方法后面加上了:base(message),该类如下: public NONEDIException(string mess ...