requirejs的GitHub:requirejs

r.js的GitHub:r.js

grunt-contrib-requirejs的GitHub:grunt-contrib-requirejs

  1. requirejs的一个典型配置,main.js

    require.config({
    shim: {
    '$': {
    exports: 'Zepto' //zepto.js里面暴漏的全局变量
    },
    '_': {
    exports: '_'
    },
    'B': {
    deps: [
    '_' //依赖关系
    ],
    exports: 'Backbone'
    }
    },
    paths: {
    '$': 'zepto', //配置路径
    '_': 'underscore',
    'B': 'backbone'
    }
    });
    requirejs(['$',''], function(b) {
    debugger;
    });

    关于config.shim.exports这里有很好的解释:shim.exports

  2. r.js的使用方法
    node r.js -o baseUrl=src name=main out=dist/build.js optimize=none

    这样用的话config.paths里面main.js里面的paths配置会无效,看这里的解释:

    r.js optimizer does not load paths defined by a require.config

  3. 关于第2点写两遍paths是重复劳动,r.js里面有一个mainConfigFile参数,将命令行改成这样

    node r.js -o name=main mainConfigFile=src/main.js out=dist/build.js optimize=none

    为什么name和mainConfigFile都指向main呢,因为工程里配置文件和启动文件都是main.js,我们完全可以分开放,

    src/config.js:

    require.config({
    shim: {
    '$': {
    exports: 'Zepto'
    },
    '_': {
    exports: '_'
    },
    'B': {
    deps: [
    '_'
    ],
    exports: 'Backbone'
    }
    },
    paths: {
    '$': 'zepto',
    '_': 'underscore',
    'B': 'backbone'
    }
    });

    src/main.js:

    requirejs(['$',''], function(b) {
    debugger;
    });

    然后运行:

    node r.js -o name=main mainConfigFile=src/config.js out=dist/build.js optimize=none

    r.js的配置文件说明看这里

  4. requirejs里嵌套依赖的问题:
    如果main.js不是这样依赖于1.js,而是像下面这样:
    requirejs(['$'], function(b) {
    requirejs(['1'],function() {
    });
    });

    那么用r.js生成的文件里是不会包含1.js的内容的,这种情况下要加上参数findNestedDependencies

    node r.js -o mainConfigFile=src/config.js name=main out=dist/build.js optimize=none findNestedDependencies=true
  5. 引用外部js的问题
    require.config({
    shim: {
    '$': {
    exports: 'Zepto'
    },
    '_': {
    exports: '_'
    },
    'B': {
    deps: [
    '_'
    ],
    exports: 'Backbone'
    }
    },
    paths: {
    '$': 'http://apps.bdimg.com/libs/zepto/1.1.4/zepto',
    '_': 'underscore',
    'B': 'backbone'
    }
    });

    zepto引用外部的js文件了,r.js无法访问

    $ node r.js -o mainConfigFile=src/config.js name=main out=dist/build.js optimize=none findNestedDependencies=true
    
    Tracing dependencies for: main
    Cannot optimize network URL, skipping: http://apps.bdimg.com/libs/zepto/1.1.4/zepto.js E:/chengzhichao/tmp/test_grunt/dist/build.js
    ----------------
    E:/chengzhichao/tmp/test_grunt/src/.js
    E:/chengzhichao/tmp/test_grunt/src/main.js

    r.js只把main.js,1.js弄到了build.js里面,这种情况下应该怎么办呢?
    a.忽略zepto.js的path
    b.将config.js包含进生成的build.js里面

    node r.js -o mainConfigFile=src/config.js name=main out=dist/build.js optimize=none findNestedDependencies=true include=config.js paths.$=empty:
  6. grunt-requirejs配置基本照搬r.js的配置

requirejs和r.js的心得的更多相关文章

  1. requireJs和r.js压缩工具

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

  2. requirejs实验002. r.js合并文件. 初体验.

    requirejs的官网上有介绍如何使用r.js合并,压缩文件的.http://requirejs.org/docs/optimization.html https://github.com/jrbu ...

  3. 转:requirejs打包压缩r.js使用示例

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  4. requirejs 使用实例r.js打包

    在这里,请先看基础文章与相关技术文档: 安装: npm init npm install requirejs --save npm install jquery@1.11.1 --save 创建基本目 ...

  5. requirejs原理深究以及r.js和gulp的打包【转】

    转自:http://blog.csdn.net/why_fly/article/details/75088378 requirejs原理 requirejs的用法和原理分析:https://githu ...

  6. requireJS中如何用r.js对js进行合并和压缩css文件

    我运行的环境是windows+node.js,首先是用npm安装requirejs(全局安装,即使用 'npm install requirejs -g',这样方便在各个目录调用),接着就是下载r.j ...

  7. requireJS的优化工具 ---- r.js

    requireJS是javascript的模块加载器,是基于AMD规范实现的. r.js是其提供的对模块进行打包和构建的一个工具 下载 r.js 创建r.js 的配置文件 build.js build ...

  8. requirejs的打包工具r.js

    不建议用命令行,还是用配置文件比较方便--build.js. 我的build.js文件内容大概如下: ( { appDir : './', baseUrl : './scripts', dir : ' ...

  9. 转: requirejs压缩打包r.js使用示例 2 (~~很详细的教程)

    这一篇来认识下打包工具的paths参数,在入门一中 就介绍了require.config方法的paths参数.用来配置jquery模块的文件名(jQuery作为AMD模块时id为“jquery”, 但 ...

随机推荐

  1. Spring+SpringMVC+Mybatis+MAVEN+Eclipse+项目完整环境搭建

    1.新建一个Maven项目,创建父项目. 2.创建子项目模块 3.创建javaWeb项目 4.创建后的项目目录结构 5.Maven文件配置 parent父项目pom.xml文件配置 <?xml ...

  2. sql批量插入数据之存储过程

    -- ============================================= -- Author: jf_ou -- Create date: 2016/03/22 -- Desc ...

  3. underscorejs-each学习

    2.1 each 2.1.1 语法: _.each(list, iteratee, [context]) 2.1.2 说明: 依次对集合的所有元素进行某种操作,原样返回list.接收3个参数,list ...

  4. sql 批处理、获取自增长、事务、大文本处理

    批处理 需要批量执行sql语句! 需求:批量保存信息! 设计: AdminDao Public void save(List<Admin list){ // 目前用这种方式 // 循环 // 保 ...

  5. 【Hybrid App】关于Hybrid App技术解决方案的选择

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越多 ...

  6. Milking Grid

    poj2185:http://poj.org/problem?id=2185 题意:在一个字符矩阵中,找一个最小的字符子矩阵,使其能够覆盖整个矩阵. 题解:在KMP中i-next[i]是这能够覆盖这个 ...

  7. H.264 Transform

    变换是视频.图像编码的核心部分.目前所采用的变换算法都是从傅里叶变换演变而来.单纯的变换并不会导致视频(图像)的码率变小,反而会增大.但是非常巧妙的一点是:变换把图像从空域转换成的时域,把由色块组成的 ...

  8. Android基础知识、四大组件(转)

    Android应用程序使用java语言编写的.Android SDK工具将所有的数据和资源文件以及代码进行编译,打包称为一个apk文件.一个apk文件中的所有代码被认为是一个应用,android系统的 ...

  9. BZOJ 1032 [JSOI2007]祖码Zuma

    1032: [JSOI2007]祖码Zuma Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 637  Solved: 318[Submit][Stat ...

  10. 【转】Android 使用Scroller实现绚丽的ListView左右滑动删除Item效果

    原文网址:http://blog.csdn.net/xiaanming/article/details/17539199 转帖请注明本文出自xiaanming的博客(http://blog.csdn. ...