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

  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. C. Prefixes and Suffixes

    链接 [https://codeforces.com/contest/1092/problem/C] 题意 给你某个字符串的长度n,再给你2*n-2个前缀或者后缀 让你判断那些是前缀那些是后缀 关键是 ...

  2. Day2 Numerical simulation of optical wave propagation之标量衍射理论基本原理(二)

    2.麦克斯韦方程组的简单行波解 讨论通过线性.各向同性.均匀.无色散.无限电荷和电流的电介质材料的光波传输.在这种情况下,介质具有如下属性: (1)推导获得波动方程( 由麦克斯韦方程组导出的.描述电磁 ...

  3. Python_内置函数之round的幺蛾子

    pycharm运行结果 1 ret = round(0.5) print(ret) >>> 0 ret1 = round(1.5) print(ret1) >>> ...

  4. Golang开发工具LiteIDE使用方法整理

    安装 参考github的说明 添加GOPATH 创建workspace 创建新文件 运行程序 Liteide中运行程序有两种方式: FR(FileRun)是编译并运行单个文件,可以使用Shift + ...

  5. Jenkins Installing and migration

    JAVA_Zookeeper_hadoop - CSDN博客https://blog.csdn.net/wangmuming Installing Jenkins on Red Hat distrib ...

  6. 关于百度地图API和jqGrid踩到的坑

    1.百度地图重新标记问题 var map = new BMap.Map("map"); ...... var marker = new BMap.Marker(point); // ...

  7. React-Native之截图组件view-shot的介绍与使用

    React-Native之截图组件view-shot的介绍与使用 一,需求分析 1,需要将分享页生成图片,并分享到微信好友与朋友圈. 二,react-native-view-shot介绍 1,可以截取 ...

  8. POJ_1185_炮兵阵地 dp+状态压缩

    题目:炮兵阵地 链接:http://poj.org/problem?id=1185 解题思路: 首先用 int 来表示每一行的情况,比如说第一行是k1,那么[ k1&(k1>>2) ...

  9. 局域网 FTP建立,搭建一个简易的局域网服务器

    1.创建用户名以及密码: 右键我的电脑 -> 管理->本地用户和组->右键用户->新用户----设置用户名密码: 2.安装IIS 和FTP :控制面板->程序->打 ...

  10. 【转】Java基础——容器分类

    Java容器可以说是增强程序员编程能力的基本工具,本系列将带您深入理解容器类. 容器的用途 如果对象的数量与生命周期都是固定的,自然我们也就不需要很复杂的数据结构. 我们可以通过创建引用来持有对象,如 ...