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 @   徐锅  阅读(1014)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南

点击右上角即可分享
微信分享提示
AI IDE Trae