在这里，请先看基础文章与相关技术文档：

  1. 安装：

    npm init
    
npm install requirejs --save
    
npm install jquery@1.11.1 --save

创建基本目录：
    
js/main.js&test.js
    
css/index.css
    
index.html
    
build.js
    
copy requirejs目录下的r.js到根目录

创建导出目录：one

测试目录创建完成！
  2. index.html
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="css/index.css">
    
</head>
    
<body>
    
<iframe class="iframe" src="http://baidu.com" frameborder="0" height="300"></iframe>

<script type="text/javascript" defer anync="true" src="node_modules/requirejs/require.js" data-main="js/main"></script>
    
</body>
    
</html>
  3. build.js 
    //参考配置目录  http://www.yfznw.com/node/22
    ({
    
    dir:'./one',//输出路径
    
    paths:{
    
        jquery:'node_modules/jquery/dist/jquery.min',
    
        test:'js/test',
    
        index:'css/index.css'
    
    },
    
    name: 'js/main',// 模块入口
    
    optimize: 'none',//是否压缩 默认是压缩的，去掉不要就是压缩
    
})
  4. main.js
    require.config({
    
    baseUrl:'node_modules/',
    
    paths:{
    
        'jquery':'jquery/dist/jquery.min',
    
        'js':'../js'
    
    }
    
});
    
require(['jquery','js/test'],function($,test) {
    
    console.log($);
    
    test.one();
    
});
  5. test.js
    define([],function() {
    
   var testing = {};

   testing.one = function() {
    
       console.log('module testing');
    
   };

    return testing
    
});
  6. index.css (主要只是存在而己，设定了流动条样式)
    @charset "utf-8";

*::-webkit-scrollbar{width:2px;height:12px;}
    
*::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{width:;height:;}
    
*::-webkit-scrollbar-button:vertical:increment{background:transparent;}
    
*::-webkit-scrollbar-track-piece:vertical{background:#DFE7EF;}
    
*::-webkit-scrollbar-track-piece:vertical:hover{background:#DFE7EF;}
    
*::-webkit-scrollbar-track-piece:horizontal{background-color:transparent;}
    
*::-webkit-scrollbar-thumb:vertical{height:100px;background:rgba(110,146,182,.5);}
    
*::-webkit-scrollbar-thumb:vertical:hover{background:rgba(110,146,182,.4);}
    
*::-webkit-scrollbar-thumb:horizontal{width:80px;height:10px;background-color:#ccc;}
  7. 目录截图

  8. 生成r.js打包目录 
    //切换到根目录

执行：node r.js -o build.js
  9. 效果：
    新目录one就是一个新的站点，那么流程到此结束；可看到与未打包时一样的结果；但是，相对而言请求被打包了，文件被打包了，那么还有更多 的细节，请查看官方文档 ；

requirejs 使用实例r.js打包的更多相关文章

  1. r.js打包注意事项 r.js打包 这个是配合require.js打包的

    这个./代表的是当前文件的父目录....打包的资源一定要在这个父目录中下面才行,,,,一定一定,要放在这个目录一下才能被正确找到. 不然只是copy了一份一模一样的文件夹和文件过去,并不会处理压缩啥的 ...

  2. 转载 r.js打包经验

    例子1 先是HTML页面 <!DOCTYPE html> <html>     <head>         <title>My App</tit ...

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

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

  4. r.js打包

    久闻r.js的大名,但实际没有用它做过任何东西.今天用它时,发现网上许多教程都不对.研究一下,把我的实际经验分享给大家. 例子1 先是HTML页面 <!DOCTYPE html> < ...

  5. requirejs r.js 打包报错paths fallback not supported in optimizer please provide a build config path override for jquery

    错误原因: 改为:

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

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

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

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

  8. requirejs 多页面，多js 打包代码，requirejs多对多打包【收藏】

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

  9. requirejs 多页面，多js 打包代码，requirejs多对多打包

    这段代码来自 http://stackoverflow.com/questions/20583812/grunt-requirejs-optimizer-for-a-multi-app-project ...

随机推荐

  1. Mysql绿色版安装和遇到的问题

    MySQL绿色版安装整套流程,http://www.cnblogs.com/LiuChunfu/p/6426918.html,按这个教程装完后,用cmd命令窗口也能登陆.但是用mysql-font登不 ...

  2. Contest1692 - 2019寒假集训第三十一场 UPC 11075 Problem D 小P的国际象棋

    非常简单的单点修改+区间加+区间查询.我用的是最近刚学的区间修改版本树状数组.  直接维护即可,注意修改后的单点值已经不是a[i],或者b[i],要通过区间查询求单点.不然是错的. 区间修改版本树状数 ...

  3. httpd.conf简单配置

    本文介绍apache中httpd.conf的配置.该配置也可解决打开php文件却变成下载的尴尬情况 1 修改网站根目录查找DocumentRoot有这么一行DocumentRoot "C:/ ...

  4. semantic-ui 图标

    semantic-ui提供了很多的图标,基本常用的在官网上面都能找到.要想记住这么多图标是不可能的,但是也是有简便方法记忆. 首先,图标其实和按钮的区别基本没有,要说有的话,也就是基础样式的大小不同吧 ...

  5. ocrosoft 1015 习题1.22 求一元二次方程a*x^2 + b*x + c = 0的根

    http://acm.ocrosoft.com/problem.php?id=1015 题目描述 求一元二次方程a*x2 + b*x + c = 0的根.系数a.b.c为浮点数,其值在运行时由键盘输入 ...

  6. MyEclipse 10.X激活方法

    普遍的激活办法请参考: http://blog.csdn.net/miss_kun/article/details/51819206 http://jingyan.baidu.com/article/ ...

  7. Mybatis测试用例

    package cn.zhangxueliang.mybatis.mapper; import static org.junit.Assert.*; import java.io.InputStrea ...

  8. 【学亮IT手记】PL/SQL游标编程

    游标提供了一种从表中检索数据并进行操作的灵活手段,主要用在服务器上,处理由客户端发送给服务器端的sql语句,或者是批处理.存储过程.触发器中的数据处理请求. 显式游标 是由用户声明和操作的一种游标,通 ...

  9. C# Note15：设置Window图标的正确方式

    Windows Presentation Foundation(WPF)独立应用程序有两种类型的图标: 一个程序集(assembly) 图标,通过在应用程序的项目构建文件中使用<Applicat ...

  10. 工作效率提升之Eclipse篇(1)：干掉烦人的xml文件的validation

    每次启动maven项目,都会有一堆烦人的xml文件的validation,一旦网络较慢,项目重新启动的时候,这些多余的验证纯属浪费时间. Eclipse上取消validation的方法: 1.菜单[W ...