上面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. Hue协作框架

    http://archive.cloudera.com/cdh5/cdh/5/hue-3.7.0-cdh5.3.6/manual.html 一:框架 1.支持的框架 ->job ->yar ...

  2. There is no tracking information for the current branch

    There is no tracking information for the current branch. Please specify which branch you want to mer ...

  3. 记录下 QT Linux 静态编译遇到的坑

    Qt下静态编译Qt,根据我的经验,如果按照Windows下那种直接拿官方sdk安装之后的文件来编译是行不通的,需要直接下载Qt的source包,目前诺基亚的源码叫做qt-everywhere-open ...

  4. C#远程共享文件路径访问

    public class Win32ServiceManager    {        private string strPath;        private ManagementClass ...

  5. Bulk Insert & BCP执行效率对比（续）

    上回由于磁盘空间(约70G)不足,导致Bulk Insert和BCP导入中途失败:今次统一一些操作,以得到Bulk insert与BCP分别执行效率: 1. 15435390笔数据,21.7G csv ...

  6. background和background-size

    今天偶遇一个小问题. 添加logo图片时, 由于不需要重新定位图片位置,就准备偷懒在间歇属性中省略background-position的属性,然而很不幸的是,结果却是酱紫的(谷歌浏览器): 不能加载 ...

  7. Windows创建文件链接

    Windows平台创建文件.文件夹链接: 测试平台,windows10. D:\>mklink 创建符号链接. MKLINK [[/D] | [/H] | [/J]] Link Target / ...

  8. MongoDB聚合查询

    1.count:查询记录条数 db.user.count() 它也跟find一样可以有条件的 db.user.count({}) 2.distinct:用来找出给定键的所有不同的值 db.user.d ...

  9. jsp 标签、 项目全路径引用${CTX}

    请根据自己的需要选择以下标签. <%@ taglib uri="/struts-tags" prefix="s"%><%@ taglib ur ...

  10. JAVA中使用JSON进行数据传递

    最近在做一个基于JAVA Servlet的WEB应用以及对应的Anroid应用客户端的开发工作. 其中,在接口的访问和数据的传输方面使用的比较多的是使用JSON对象来操作格式化数据:在服务器端采用JS ...