如何利用Require.Js管理多頁面站點文件(譯)

英文版地址

最近使用 Require.Js 的時候我發現它確實是一個改善代碼管理的一個好方法。我之前發表Backbone類的文章時曾提到過 Require，但此前，我從未在傳統的多頁面網站內使用到 Require。在多頁面網站裏面配置 Require 的過程至關繁瑣，因此我想將教程整理出來幫助那些可能會遇到困惑的朋友們。

 

概述

注意，本文假設你已經熟悉 Require.Js 和基本的配置使用方法，若是不是，建議你先看看官網的手冊。

 

建立一個單頁應用 (single-page App) 時，許多人喜歡在發佈以前把全部的js文件所有打包編譯爲一個文件，能夠減小斷斷續續的 http 請求，操做體驗簡潔明快更像 app，一樣的，這種作法增長了首次加載時頁面的量級。

部署多頁面站點的時候，編譯合併全部文件並不是一個好方案，由於你不能保證用戶會訪問到每個頁面，並且加載中的文件會有不少用不到的js，這拖慢了頁面渲染速度，用戶體驗變差。好比說，用戶只是訪問了Contact頁面，那麼有必要把About頁面要用到的js給加載一遍嗎？

完美的情景是每個頁面都有本身的 main 文件用來存放特定頁面的方法，外加一個獨立文件(最好是緩存起來)用來存放公共 Javascript 庫。

例如，你有一個About頁面和一個 Contact 頁面，因而你新建一個 mian-about.js 和一個 main-contact.js，並且假設 mian-about 和 main-contact 都須要 jQuery 和 underscore。這時，不建議把 jQuery 和 underscore 編譯到每個 main 文件裏面，那樣會形成沒必要要的重複和臃腫，咱們只用新建一個包含 jQuery 和 underscore 的 common.js 而且保證它在 mian-*.js 文件以前加載就能夠了。下表能夠加深理解：

common.js

----------------

js/vendor/jquery.js

js/vendor/underscore.js

 

About

----------------

js/common.js

js/app/main-about.js

 

 

Contact

----------------

js/common.js

js/app/main-contact.js

將那些公用的 js 文件編譯合併到 common.js 後減小了每一個頁面的 http 請求，並且，第一個頁面加載完畢，common.js 就能夠從瀏覽器緩存裏直接讀取了。下面咱們再來看一個例子。

 

例子

RequireJS 的做者 James Burke，作了不少有效組織代碼，利用 RequireJS Optimizer 壓縮優化代碼的努力，有些例子是我常常提到的：example-multipage-shim.，example-multipage。但我更喜歡用 shim 版本（它支持非 AMD 方式定義的模塊載入）的 RequireJS，由於一個項目裏面彷佛總有幾個非 AMD 的腳本文件。

 

若是你在用RequireJs建立一個單頁站點，那麼你可能會這樣定義你的script標籤：

<!--This sets the baseUrl to the "scripts" directory, and
    loads a script that will have a module ID of 'main'-->
<script data-main="scripts/main.js" src="scripts/require.js"></script>

data-main 屬性能夠很方便的用來設置 RequireJs 的 baseUrl property，一般，你也能夠在 main.js 裏面加上一些配置，好比，你要加載一個第三方的js庫，你要建立一個路徑以便引用。由於模板裏的每個單頁的 mian-* 文件都不一樣，因此，咱們能夠把配置信息放在 common.js 裏：

 1 //The build will inline common dependencies into this file.
 2 
 3 requirejs.config({
 4   baseUrl: './js',
 5   paths: {
 6     'jquery': 'vendor/jquery',
 7     'bootstrap': 'vendor/bootstrap'
 8   },
 9   shim: {
10     'bootstrap': ['jquery']
11   }
12 });

除了 common.js，我還在 app/models 下建立了BasicModel文件以代表common.js是公用的，並把BasicModel放進common.js裏。

 

編譯

編譯以前須要有一個 option.js 來指定哪些文件須要編譯，哪些不須要：

 1 module.exports = {
 2   appDir: 'www',
 3   baseUrl: 'js/',
 4   mainConfigFile: 'www/js/common.js',
 5   dir: 'www-release',
 6   modules: [
 7     {
 8       name: 'common',
 9       include: [
10         'app/models/basicModel',
11         'jquery',
12         'bootstrap'
13       ]
14     },
15     {
16       name: 'app/main-about',
17       exclude: ['common']
18     },
19     {
20       name: 'app/main-contact',
21       exclude: ['common']
22     }
23   ]
24 };

 上面的代碼中，首先把全部的文件用 include 方法包含進來，而後把不須要的文件用 exclude 方法排除出去。RequireJs 會根據 exclude 的參數配置理出嵌套依賴關係並把文件排除掉。由於 bootstrap 已經編譯合併進 common.js 了，因此不須要單獨爲 main-about 或 main-contact 再 exclude 掉 bootstrap。

在執行這些操做以前，你須要執行一個 npm 安裝。首先你要確保安裝了 grunt 工具，安裝完成後執行 grunt 命令壓縮打包。若是打包順利完成，會在www-release/build.txt 裏看到以下被打包的文件清單：

css/bootstrap-responsive.css
----------------
css/bootstrap-responsive.css

css/bootstrap.css
----------------
css/bootstrap.css

css/style.css
----------------
css/style.css

js/common.js
----------------
js/common.js
js/app/models/basicModel.js
js/vendor/bootstrap.js

js/app/main-about.js
----------------
js/app/models/aboutModel.js
js/app/main-about.js

js/app/main-contact.js
----------------
js/app/models/contactModel.js
js/app/main-contact.js

www-release/common.js 裏面試一大塊壓縮後的代碼，代碼裏就包含了 BasicModel, Bootstrap, jQuery, and 初始配置代碼。要配置 about.html ，只須要按下面的順序加載文件便可：

 1 <script src="./js/vendor/require.js"></script>
 2 <script type="text/javascript">
 3 // Load common code that includes config,
 4 // then load the app logic for this page.
 5 require(['./js/common'], function (common) {
 6   // ./js/common.js sets the baseUrl to be ./js/
 7   // You can ask for 'app/main-about' here instead
 8   // of './js/app/main-about'
 9   require(['app/main-about']);
10 });
11 </script>

經過層層引入 RequireJs --> common.js --> main-about.js 實現了明晰簡便的代碼管理方式。

謝謝。

 

前端技術文章翻譯QQ羣：338353879