如何利用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