requirejs結合text.js及css.js等插件實現模塊依賴開發（打包案例）

原創

2020-02-21 10:06

序

本文基於requirejs結合text插件實現模塊化（打包案例）的基礎上，加入了css樣式的導入與打包功能。具體案例如下：

css.js、css-build.js、normalize.js下載

下載地址：https://github.com/guybedford/require-css
bower下載命令：

$ bower install require-css

在下載後的bower_components\require-css 路徑下能找到他們3個js文件。

項目目錄

打包前：

配製文件

config.js

requirejs.config({
    baseUrl: './src/js', //require依賴根目錄
    paths: {
        jquery: '../../lib/jquery/dist/jquery',
        text: '../../lib/text/text',//爲text.js文件路徑起別名
        css: '../../lib/require-css/css', //css.js插件別名
        'css-builder': '../../lib/require-css/css-builder', //樣式打包時需要
        normalize: '../../lib/require-css/normalize' //樣式打包時需要
    }
});

build.js

({
    appDir: '../src', //需要打包的目錄
    baseUrl: './js', //require依賴根目錄
    dir: '../build', //打包輸出路徑
    mainConfigFile: './config.js', //依賴關係配製文件
    name: 'app' //需要打包的模塊
})

第三方文件

本塊內容請自行下載並放置到該目錄下。

開發源文件src

js/app.js

var modules = [
    'jquery',
    'text!../views/teacher.html',
    'text!../views/student.html',
    'css!../css/teacher.css',
    'css!../css/student.css'
];

require(modules, function ($, teacher, student) {
    var isChange = false,
        box = $('#box');

    box.html(teacher);
    $('#btn').click(function () {
        if (isChange) {
            box.html(teacher);
        } else {
            box.html(student);
        }
        isChange = !isChange;
    });
});

views/teacher.html

<div class="teacher">
    <h2 class="title">老師模塊</h2>
    <ul class="list">
        <li><span>姓名：</span>婁笙悅</li>
        <li><span>年齡：</span>30</li>
        <li><span>性別：</span>男</li>
    </ul>
</div>

views/student.js

<div class="student">
    <h2 class="title">學生模塊</h2>
    <ul class="list">
        <li><span>姓名：</span>張三瘋，<span>年齡：</span>18，<span>性別：</span>男</li>
        <li><span>姓名：</span>王五星，<span>年齡：</span>20，<span>性別：</span>男</li>
        <li><span>姓名：</span>王翠翠，<span>年齡：</span>19，<span>性別：</span>女</li>
    </ul>
</div>

css/teacher.css

.teacher .title {
    color: red;
    font-size: 36px;
}

.teacher .list {
    color: orange;
}

css/student.css

.student .title {
    color: blue;
    font-size: 30px;
}

.student .list {
    color: green;
}

入口文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>requirejs實現模塊化開發</title>
</head>
<body>
<h1>requirejs實現模塊化開發</h1>
<button id="btn">切換模塊</button>
<div id="box"></div>
<script src="lib/requirejs/require.js" data-main="main.js"></script>
</body>
</html>

main.js

var debug = true;
if (debug) {
    require(['./config/config', './src/js/app']);
} else {
    require(['./config/config', './build/js/app']);
}

r.js打包項目

r.js安裝

$ npm install -g requirejs

r.js打包命令

在根目錄下右鍵打開git工具並執行：

$ r.js -o config/build.js

打包後需要修改main.js和config.js

打包後的項目目錄：

將main.js的debug改爲false;
將config.js的配置項baseUrl改爲‘./build/js’

謝謝關注，歡迎點贊：）

婁笙悅

發佈了70 篇原創文章 · 獲贊 97 · 訪問量 8萬+

私信關注

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.