requirejs 使用实例r.js打包

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

  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:0;height:0;}
    *::-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就是一个新的站点,那么流程到此结束;可看到与未打包时一样的结果;但是,相对而言请求被打包了,文件被打包了,那么还有更多 的细节,请查看官方文档

 

posted @ 2017-12-07 11:38  徐锅  阅读(1013)  评论(0编辑  收藏  举报