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

  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. AtCoder Beginner Contest 053

    D - Card Eater Time limit : 2sec / Memory limit : 256MB Score : 400 points Problem Statement Snuke h ...

  2. 分解质因数FZU - 1075

    题目简述:就是给一个数,把他拆分成多个素数的乘积,这正好是算术基本定理.本题我的解决方法是埃氏素数筛+质因数保存...开始T掉了,是因为我在最后枚举了素数,保存他们的次数,然后两次for去查询他们的次 ...

  3. c++入门之浅入浅出类——分享给很多想形象理解的人

    引入类之前,首先引入一个古老的话题:类别,比如int ,char ,double:这些基本的类型方便了我们描述数据(请注意,这句话很重要),类型的存在就是为了方便我们描述数据的.而c++中的类其实作用 ...

  4. socket流程

  5. semantic-ui 表单

    1.定义表单 先看一个基础的表单,再讲解一下: <form class="ui form" method="post" action="&quo ...

  6. MySQL :: Fatal error: Can&#039;t change to run as user &#039;mysql&#039;. Please check that the user exists!

    Fatal error: Can't change to run as user 'mysql'. Please check that the user exists! MySQL :: Fatal ...

  7. h5 文件下载

    一.a 标签 移动端不支持 onDownFile= (url, filename) => { const downUrl = `http://10.1.109.123:19092/down/to ...

  8. oracle事务的四个特性（ACID）

    事务产生的背景 当在PL/SQL中同时操作多个SQL语句,比如通过DML语句添加.修改或删除数据时,如何确保数据库数据不会因为意外而倒置错误数据是一个非常重要的问题. 以仓库发料系统为例,如果某一张领 ...

  9. java 工厂模式 转载

    下面介绍三种设计模式,简单工厂模式,工厂方法模式,抽象工厂模式 思考如下场景: 有一天,林同学准备去买笔记本,他到商城发现有两款电脑他特别喜欢, 一款是 Macbook Pro, 另一款是 Surfa ...

  10. mac下php开发环境的搭建

    1.phpstorm 在官网:https://www.jetbrains.com/phpstorm/,下载最新版:phpstorm-2016.2.1 在http://15.idea.lanyus.co ...