requirejs 使用實例r.js打包

時間 2019-12-18

標籤 requirejs 使用實例 r.js 打包欄目 JavaScript 简体版

原文原文鏈接

在這裏，請先看基礎文章與相關技術文檔：javascript

安裝：

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就是一個新的站點，那麼流程到此結束；可看到與未打包時同樣的結果；可是，相對而言請求被打包了，文件被打包了，那麼還有更多的細節，請查看官方文檔；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。