上面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. 关于c语言二维数组与指针的个人理解及处理办法。

    相信大家在学习C语言时,对一维数组和指针的理解应该是自信的,但是,我在学习过程中,看到网上一些博文,发现即便是参加工作的一些专业编程人员,突然碰到二维数组和指针的问题时,也可能会遇到难以处理的诡异问题 ...

  2. python join

    # 对序列进行操作 ' '.join(['hello','good','boy','doiido']) hello:good:boy:doiido # 对字符串进行操作 ':'.join(" ...

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

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

  4. SQL重要命令

    SQL对大小写不敏感:SELECT与select是相同的. SQL语句的分号:分号是在数据库系统中分隔每条 SQL 语句的标准方法,这样就可以在对服务器的相同请求中执行一条以上的 SQL 语句. SE ...

  5. 【转】Android的材料设计兼容库（Design Support Library）

    转自:http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html?mType=Group Android的材料设计兼容 ...

  6. java 中间件

    先说中间件:非底层操作系统软件.非业务应用软件,不是直接给最终用户使用的,不能直接给客户带来价值的软件,统称中间件.常见的有如下几种:服务中间件.集成中间件.数据中间件.消息中间件.安全中间件. 其中 ...

  7. iOS ARC环境下dealloc的使用

    众所周知,iOS开发的时候,使用ARC的话,dealloc函数是不需要实现的,写了反而会出错. 但有些特殊的情况,dealloc函数还是需要的. 比如,在画面关闭的时候,需要把ViewControll ...

  8. LeetCode Longest Increasing Path in a Matrix

    原题链接在这里:https://leetcode.com/problems/longest-increasing-path-in-a-matrix/ Given an integer matrix, ...

  9. myscroll

    <!DOCTYPE html> <head><meta http-equiv="Content-Type" content="text/ht ...

  10. Shell 小技巧

    Shell 小技巧 ${} 的使用 截断变量 去掉左边 使用 # (最短匹配)或 ## (最长匹配)方法为 ${var#<模式>} var=DUMMY echo ${var#*M} # M ...