r.js合併實踐

時間 2019-12-08

原文原文鏈接

項目中用到require.js作生產時模塊開發，但上線要合併壓縮，幸虧它配套有r.js。下面就其用法說明一下。css

首先建一個目錄，裏面的結構以下：html

require.js能夠到r.js項目下載
r.js能夠到r.js項目下載
server.exe能夠到avalon項目下載
jquery能夠到JQ官網下載
avalon.js能夠到avalon項目下載，並把裏面的loader: true改成 loader: false，禁止自帶的加載器。
main.js是用於配置加載選項的，如shim機制，有時還作一些初始化操做。
build.js是用於合併壓縮的。

index.html的內容以下：node

<!doctype html>
<html>
    <head>
        <title>avalon+requirejs</title>
        <meta charset="utf-8">
        <script data-main="js/main" src="require.js"></script>
        <style type="text/css">
            .wrapper {
                width: 200px;
                height: 200px;
                background: gray;
            }
        </style>
    </head>
    <body>
        <div class="wrapper" ms-controller="xxx">{{str}}</div>
    </body>
</html>

main.js的內容如下：jquery


require.config({
    baseUrl: 'js',
    paths: {
        jquery: 'jquery',
        avalon: 'avalon'
    },
    shim: {
        jquery: {
            exports: "jQuery"
        },
        avalon: {
            exports: "avalon"
        }
    }
});

require(['avalon',"jquery"], function(avalon, Q) {
   Q("body").append("test jq")
   avalon.define("xxx", function(vm){
       vm.str = "加載成功"
   })
   avalon.scan()
});

由於main.js是至關於require.js的下一級目錄中，須要設置baseUrl。因爲avalon與jquery都不是根據嚴格的AMD定義它的庫的結構（即，沒有用define方法包裹起來），咱們須要經過shim機制處理一下。最後，咱們還手動加載avalon，進行掃描綁定！git

而後點擊 server.exe，打開IE或chrome。頁面加載，它就會加載require.js。require.js會找到加載它的那個script節點，發現它定義了data-main屬性，根據它的值去加載js/main.js文件，而後它配置自身，而後加載avalon並完成頁面的從新渲染！github

咱們再來看合併壓縮。打開build.js，裏面的內容以下：chrome


({
    baseUrl: '',
    paths: {
        jquery: 'jquery',
        avalon: 'avalon'
    },
    shim: {
        jquery: {
            exports: "jQuery"
        },
        avalon: {
            exports: "avalon"
        }
    },
    name: "main",
    out: "main-built.js"
})

你想r.js作壓縮，還有一個必要條件，得安裝node.js，這個不詳談了，本身百度谷哥。而後要安裝r.js，window下打開控制檯，輸入npm install -g requirejs。而後定位到js目錄下，輸入node r.js -o build.js，而後該目錄下就會多出main-built.js這個文件，表示合併成功！npm

而後上線時，將index.html中 data-main="js/main"改爲 data-main="js/main-built"就好了。app

build.js用到的配置項，英文文檔可見這裏requirejs

相關標籤/搜索

每日一句

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