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

  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. python-Selenium库的详解

    一.什么是Selenium selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium Remote Control)和测试的并行 ...

  2. pycharm 中 import requests 报错

    一 , 使用Pycharm来抓取网页的时候,要导入requests模块,但是在pycharm中 import requests 报错. 原因: python中还没有安装requests库 解决办法: ...

  3. A+B大数运算

    基础加法大数运算: [https://vjudge.net/problem/HDU-1002] 题目: 输入两个长度不超过1000的整数求出sum. 思路: 由于数字很大不能直接加,用字符串形式输入, ...

  4. MyBatis模糊查询不报错但查不出数据的一种解决方案

    今天在用MyBatis写一个模糊查询的时候,程序没有报错,但查不出来数据,随即做了一个测试,部分代码如下: @Test public void findByNameTest() throws IOEx ...

  5. Git文件冲突的常用解决方法

    在提交代码时,偶尔会有文件冲突的情况,当出现: Please, commit your changes or stash them before you can merge. 提示后,可用依次输入下列 ...

  6. Java对象的创建、内存布局和访问定位

    在Java运行时数据区中,我们知道了虚拟机内存的概况,本文介绍虚拟机内存中的数据的其它细节,如对象如何创建.如何布局以及如何访问. 基于实用的原则,这里以HotSpot虚拟机和常用的内存区域Java堆 ...

  7. 社交CRM SCRM

    社交CRM - 国际版 Binghttps://cn.bing.com/search?FORM=U227DF&PC=U227&q=%E7%A4%BE%E4%BA%A4CRM 社交CRM ...

  8. Use the Microsoft Symbol for VS and Windbg

    快捷方式mklink的远程符号由于所有者权限问题,链接到本地可能造成不能使用, 或每次都需要重新下载, 1.环境变量中没有设置_NT_SYMBOL_PATH的值 2.windbg快捷方式中也没有设置- ...

  9. Jmeter监控服务器笔记

    Jmeter监控服务器-CPU,Memory,Disk,Network性能指标 本文主要说一下如何通过JMeter插件来监控服务器CPU.内存.磁盘.网络等相关资源. 一.下载 首先进入网址https ...

  10. C# Note30： 网络爬虫

    用C#实现网络爬虫(一) 用C#实现网络爬虫(二) 基于C#.NET的高端智能化网络爬虫(一)(反爬虫哥必看) 基于C#.NET的高端智能化网络爬虫(二)(攻破携程网) C#获取网页内容的三种方式