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

代码目录如上：

main.html代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Hello RequireJS</title>
  6.     </head>
  7.     <body>
  8.         <h1>Hello RequireJS</h1>
  9.  
  10.         <script type="text/javascript" src="js/lib/require.js"></script>
  11.  
  12.         <!-- main.js：requireJS 配置信息 -->
  13.         <script type="text/javascript" src="js/config.js"></script>
  14.         <!-- <script type="text/javascript" src="js/combine.js"></script> -->
  15.  
  16.         <script type="text/javascript">
              /*如果没有配置信息，加载one,two模块，要找到他们的存放路径*/
  17.           /*  require(["./js/mod/one", "./js/mod/two"], function (one, two) {
  18.                 console.log('加载模块：', one.name, two.name );
  19.                 console.log("bootstrap the application");
  20.             });*/
  21.             require(["one", "two"], function (one, two) {
  22.                 console.log('加载模块：', one.name, two.name );
  23.                 console.log("bootstrap the application");
  24.             });
  25.  
  26.         </script>
  27.     </body>
  28. </html>

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

  1. // requireJS的简单配置，更详细的配置信息请看 http://requirejs.org/docs/api.html#config
  2. requirejs.config({
  3.     baseUrl: "./js", //相对于当前 Html的路径
  4.  
  5.     paths: {
  6.         one: "mod/one",
  7.         two: "mod/two",
  8.         three: "mod/three"
  9.     }
  10. });

one模块代码：

  1. define(function(){
  2.     return {name:"one"}
  3. });

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

  1. define(function(require){
  2.     /*var three = require('./three');*/
  3.     var three = require('three');
  4.  
  5.     console.log('加载模块：'+three.name);
  6.  
  7.     return {name:"two"}
  8. });

three模块代码：

  1. define(function(){
  2.     return {name:"three"}
  3. });

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

  1. ({
  2.     appDir:"../src",
  3.     dir:"../release",
  4.     mainConfigFile:"../src/js/config.js",
  5.     paths:{
  6.         one:"mod/one",
  7.         two:"mod/two",
  8.         three:"mod/three"
  9.     },
  10.     modules:[{
  11.         name:"combine",
  12.         include:[
  13.             'one',
  14.             'two'
  15.         ]
  16.     }],
  17.     optimize:"uglify" 
  18.  
  19. })

     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的目录，才能执行命令

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>My App</title>
  5.        <!--  <link rel="stylesheet" type="text/css" href="css/main.css"> -->
  6.         <script data-main="js/main-build" src="js/require.js"></script>
  7.     </head>
  8.     <body>
  9.         <h1>My App</h1>
  10.     </body>
  11. </html>

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

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

  1. ({
  2.     baseUrl:'.',
  3.     name:'main',
  4.     paths:{jquery:'jquery/jquery-1.11.0.min'},
  5.     out:'main-build.js'
  6.     /*dir:'../production'*/
  7. })

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

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

回答是可以的。

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

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

  1. require.config({
  2.     paths:{
  3.         jquery:'jquery/jquery-1.11.0.min'
  4.     },

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

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

　　　　}

  1. })
  2. require(['one','sub/three',jquery,_,Backbone],function(one,three){
  3.    alert(one+three);
  4. });

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. ngrok的使用

    windows的ngrok配置: 步骤一:下载ngrok http://pan.baidu.com/s/1jH0s8o2 步骤二:如果你的国外网址没被墙就直接使用cmd命令行使用. 国内ngrok配置 ...

  2. php--yii2.0的安装

    1.php.ini中去掉php_openssl.dll前面的“;” 2.注意phpstudy中php版本使用5.4n 3.环境OK后,使用自己的域名访问下yii2.0中advanced中的requir ...

  3. Moogoose操作之Schema实现增删查改

    Schema不仅定义了文档结构和使用性能,可以为后面的Model和Entity提供公共的属性和方法. Schema.Model.Entity的关系: Schema : 可以定义字段类型,不具备数据库的 ...

  4. ArcGIS中的坐标系定义与转换 (转载）

    原文:ArcGIS中的坐标系定义与转换 (转载) 1.基准面概念:  GIS中的坐标系定义由基准面和地图投影两组参数确定,而基准面的定义则由特定椭球体及其对应的转换参数确定,因此欲正确定义GIS系统坐 ...

  5. 安装MVC3后没有dbcontext生成器的解决方案

    安装MVC3后,采用DBFIRS的方式,从数据库生成模型,这样生成的类是基于ObjectContext的,无法使用DbContext的一些方法,比如Set.Find.Entry等.需要用ADO.NET ...

  6. [LeetCode]题解（python）：102 Binary Tree Level Order Traversal

    题目来源 https://leetcode.com/problems/binary-tree-level-order-traversal/ Given a binary tree, return th ...

  7. Windows-001-Win7系统变量设置

    本节主要讲述Windows系统环境变量配置介绍,以 Windows 7 为例讲解. 1.右键单击 计算机,选择 属性,进入 系统 界面,如下所示: 2.点击上图中的 高级系统设置,进入 系统属性 界面 ...

  8. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  9. jQuery学习之jQuery Ajax用法详解（转）

    [导读] jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍.我们先从最简单的 ...

  10. iOS -Swift 3.0 -Array(数组与可变数组相关属性及用法)

    // // ViewController.swift // Swift-Array // // Created by luorende on 16/9/12. // Copyright © 2016年 ...