如何利用Require.Js管理多页面站点文件

发布网友发布时间：2022-04-25 15:34

共1个回答

热心网友时间：2022-04-21 05:43

直接上例子，自己参考一下吧。我复制粘贴的，对于这个不太懂。

RequireJS 的作者 James Burke ，做了很多有效组织代码，利用 RequireJS Optimizer 压缩优化代码的努力，有些例子是我经常提到的： example-multipage-shim. ， example-multipage 。但我更喜欢用 shim 版本（它支持非 AMD 方式定义的模块载入）的 RequireJS，因为一个项目里面似乎总有几个非 AMD 的脚本文件。

如果你在用RequireJs创建一个单页站点，那么你可能会这样定义你的script标签：


<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 mole.exports = {
2 appDir: 'www',
3 baseUrl: 'js/',
4 mainConfigFile: 'www/js/common.js',
5 dir: 'www-release',
6 moles: [
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 实现了明晰简便的代码管理方式。