Question

我正在学习Requirejs，我开始使用两个简单的.html页面：index.html和second.html。

在index.html I worte：

<script data-main="assets/js/app.min" src="js/vendor/require.js"></script>

app.min.js文件如下所示：

requirejs.config({
    baseUrl: 'js/vendor',
    paths: {
        app: '../app',
        jquery: 'jquery-1.10.1.min'
    }
});

requirejs(["app/main"]);

我的app/main.js文件只有一个jQuery警报：

define(['jquery'], function($) {

    $(function() {

        alert('Hello World');

    });

});

工作正常！现在我只担心一件事......如果我需要为我的所有页面全局加载app/main，然后再在app/second页面上运行second.html之类的另一个文件？

可能我错过了一些关于Requirejs的内容......我认为我不需要像app.min.js那样加载app/main文件中的所有内容。

我知道我可以在单独的js文件上定义模块，但是如何在不将所有内容加载到一个文件中的情况下管理不同页面的不同文件？可能我错了，我希望你能为我开启大脑中的光。

由于

Answer 1

看一下这个例子：https://github.com/requirejs/example-multipage。该示例演示了如何创建page1.js和page2.js，并在这些文件中加载常见的东西+页面特定的东西。这是实现这一目标的几种方法之一。

另一种方法是我经常使用的是在你的所有页面中放置这样的东西：

<script src="require.js"></script>  <!-- just require -->
<script src="app.min.js"></script>  <!-- your config and also loading the main module -->

然后在second.html上，您还可以添加此

<script>require(["app/second"])</script>

您可以使用此设置进行开发，对于生产，您只需使用<script src="optimized-bundle.js"></script>替换前两行。 optimized-bundle.js可以包含require.js + config + app/main + app/second。或者，如果您只想在生产中的second.html上加载app/second以缩小主要脚本，则可以在主要捆绑包中使用require.js + config + app/main并将app/second优化为单独的捆绑包 - 在这两种情况下，html都会保持不变。

希望这有帮助。

Answer 2

我知道页面可能还需要自己的代码以及app.min中的。你可以这样做：

<script data-main="assets/js/app.min" src="js/vendor/require.js"></script> <script> // You can call the config function as many times as you need to add new configuration. requirejs.config({ // Presumably, baseUrl does not need to be changed. // baseUrl: 'js/vendor', paths: { // additional paths you may need } }); // This loads the code proper to this page. requirejs(["app/second"]); </script>

如果app/second取决于app/main，请确保在app/second的{{1}}来电中列出该依赖关系。

要求，基本信息

2 个答案: