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

  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. H5 58-网页的布局方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Podfile文件用法详解

    https://www.jianshu.com/p/b8b889610b7e 2018.01.09 15:51* 字数 2343 阅读 6263评论 3喜欢 34 前言 iOS开发会经常用到cocoa ...

  3. RabbitMQ消息的交换

    消息的交换 目录 RabbitMQ-从基础到实战(1)— Hello RabbitMQ RabbitMQ-从基础到实战(2)— 防止消息丢失 1.简介 在前面的例子中,每个消息都只对应一个消费者,即使 ...

  4. MySql数据库连接池专题

    MySql数据库连接池专题 - aspirant - 博客园https://www.cnblogs.com/aspirant/p/6747238.html

  5. WIN10 devtoolsuser

    visual studio - UWP: What is the DevToolsUser Password? - Stack Overflowhttps://stackoverflow.com/qu ...

  6. php开发之常用验证方法

    1.邮箱验证 function isEmail($email) { if (!$email) { return false; } return preg_match('/^[_\.0-9a-z-]+@ ...

  7. windows端玩转docker笔记

    启动docker安装目录下的start.sh------我是windows系统端 1.搜一下资源  docker search ubuntu 2.下载镜像   docker pull ubuntu 3 ...

  8. 了解真实的rem手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  9. java.util (Collection接口和Map接口)

    1:Collection和Map接口的几个主要继承和实现类                  1.1  Collection接口 Collection是最基本的集合接口,一个Collection代表一 ...

  10. 转《在浏览器中使用tensorflow.js进行人脸识别的JavaScript API》

    作者 | Vincent Mühle 编译 | 姗姗 出品 | 人工智能头条(公众号ID:AI_Thinker) [导读]随着深度学习方法的应用,浏览器调用人脸识别技术已经得到了更广泛的应用与提升.在 ...