requirejs 使用实例r.js打包

Posted 2020-10-16 徐锅的博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了requirejs 使用实例r.js打包相关的知识，希望对你有一定的参考价值。

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

安装：

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

测试目录创建完成！

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>

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\',//是否压缩 默认是压缩的，去掉不要就是压缩
})

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();
});

test.js

define([],function() {
   var testing = {};

   testing.one = function() {
       console.log(\'module testing\');
   };

    return testing
});

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;}

生成r.js打包目录

//切换到根目录

执行：node r.js -o build.js

效果：
新目录one就是一个新的站点，那么流程到此结束；可看到与未打包时一样的结果；但是，相对而言请求被打包了，文件被打包了，那么还有更多的细节，请查看官方文档；

以上是关于requirejs 使用实例r.js打包的主要内容，如果未能解决你的问题，请参考以下文章

使用r.js来打包模块化的javascript文件

RequireJS进阶

requirejs r.js 打包报错paths fallback not supported in optimizer please provide a build config path over

requirejs项目学习

RequireJS进阶

requirejs data-main 上的过期缓存