RequireJS進階（一）轉

時間 2019-12-05

原文原文鏈接

爲了應對日益複雜，大規模的JavaScript開發。咱們化整爲零，化繁爲簡。將複雜的邏輯劃分一個個小單元，各個擊破。這時一個項目可能會有幾十個甚至上百個JS文件，每一個文件爲一個模塊單元。若是上線時都是這些小文件，那將對性能形成必定影響。javascript

RequireJS提供了一個打包壓縮工具r.js來對模塊進行合併壓縮。r.js很是強大，不但能夠壓縮js，css，甚至能夠對整個項目進行打包。css

r.js的壓縮工具使用UglifyJS或Closure Compiler。默認使用UglifyJS（jQuery也是使用它壓縮）。此外r.js須要node.js環境，固然它也能夠運行在Java環境中如Rhino。html

這篇以一個簡單的示例來感覺下r.js，建立的目錄以下java

和入門之三目錄結構同樣，寫了三個模塊cache，event，selector。這三個模塊的代碼就不在貼了。main.js也未作修改，實現的功能仍然是爲頁面上的全部段落P元素添加個點擊事件，點擊後彈出P的innerHTML。惟一的區別是目錄中多了個r.js。node

index.html作了修改，以下git

 
        <!doctype html> 
       
        <html> 
       
        <head> 
       
        <title>requirejs進階（一）</title> 
       
        <meta charset= 
        "utf-8" 
        /> 
       
        <style type= 
        "text/css" 
        > 
       
        p { 
       
        background:  
        #999; 
       
        width: 200px; 
       
        } 
       
        </style> 
       
        </head> 
       
        <body> 
       
        <p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p> 
       
        <script data-main= 
        "built"  
        src= 
        "require.js" 
        ></script> 
       
        </body> 
       
        </html>

注意，data-main改成了「built」，上一篇的是「main」。咱們將使用r.js把js目錄下的cache.js，event.js，selector.js，main.js合併壓縮後寫到r4目錄中。github

好，讓咱們開始合併壓縮吧。web

1，打開windows命令窗口，cd到r4目錄中apache

2，輸入命令windows

node r.js -o baseUrl=js name=main out=built.js

命令行信息能夠看到已經將各個js文件合併成功了。這時回到r4目錄會發現多了一個built.js文件。

好了，合併壓縮過程完成了。

把目錄r4放到apache或其它web服務器上，訪問index.html。網絡請求以下

能夠看到除了require.js，就只有built.js了。大大減小了JS文件的http請求。這時點擊頁面上各個P元素，會彈出對應的innerHTML

這說明功能完損完好。

下面對命令行作個簡單解釋。
node r.js -o baseUrl=js name=main out=built.js

-o 表示優化，該參數是固定的，必選。
baseUrl 指存放模塊的根目錄，這裏是r4/js，由於cd到r4中了，只需設置爲js。可選，若是沒有設置將從r4中查找main.js。
name 模塊的入口文件，這裏設置成「main」，那麼r.js會從baseUrl+main去查找。這裏實際是r4/js/main.js。r.js會分析main.js，找出其所依賴的全部其它模塊，而後合併壓縮。
out 指合併壓縮後輸出的文件路徑，這裏直接是built.js，那麼將輸出到根目錄r4下。

好了，再介紹兩個參數

1，excludeShallow 合併時將排除該文件

node r.js -o baseUrl=js name=main out=built.js excludeShallow=selector

能夠看到輸出信息中再也不包括selector.js。這時運行index.html頁面，會發現selector.js被單獨請求下來了。

2，optimize (none/uglify/closure) 指定是否壓縮，默認爲uglify
不傳該參數時r.js默認以UglifyJS壓縮。設置爲none則不會壓縮，僅合併，這在開發階段是很用用的。
node r.js -o baseUrl=js name=main out=built.js optimize=none

這時生成的built.js是沒有壓縮的。

總結：
這篇演示了採用模塊開發後上線前的一個小示例：把全部模塊文件合併爲一個文件。

先下載r.js放到開發目錄中，而後使用命令行來合併壓縮。其中演示了命令行參數-o、baseUrl、name、out及excludeShallow、optimize的使用。-o、name、out是必選的，其它爲可選。

r4.zip