RequireJS - 嵌套需要调用，如何清理

RequireJS - Nested require calls, how to clean up?

本文关键字：何清理 调用 嵌套 RequireJS      更新时间：2023-09-26

我的项目是使用 Django 设置的，我的任务是在整个项目中实现 requireJS，以努力开始模块化我们的 JavaScript。因为我们使用的是 Django，这意味着我们也在使用嵌套模板，这是复杂化的开始。

以下内容基本上是我现在正在使用的设置：

// template.html
<script src="require.js">
<body>
    ... some html ...
    {% include "body.html" %}
</body>
<script>
    requirejs(['static/require/main.js'], function() {
        requirejs(['static/app/template.js']);
    });
</script>
// body.html
<div>
    ... some html ...
</div>
<script>
    requirejs(['static/require/main.js'], function() {
        requirejs(['static/app/body.js']);
    });
</script>

// compiled HTML:
<script src="require.js">
<body>
    ... some html ...
    <div>
        ... some html ...
    </div>
    <script>
        requirejs(['static/require/main.js'], function() {
            requirejs(['static/app/body.js']);
        });
    </script>
</body>
<script>
    requirejs(['static/require/main.js'], function() {
        requirejs(['static/app/template.js']);
    });
</script>

// main.js
requirejs.config({
    paths: {
        'jquery': '...'
    }
);
// body.js
define('app/bodyjs', ['jquery'], function() {
    ... some js ...
});

// template.js
define('app/template.js', ['jquery'], function() {
    ... some js ...
});

我想要的是能够清理嵌套的requirejs((调用。

我宁愿做

// body.js
define('app/body.js', ['/static/require/main.js', 'jquery'], function () {
    ... some js ...
});

但这最终会在/jquery.js 上寻找 jquery，这是不正确的，正确的路径是/static/lib/jquery.js

关于如何清理它的想法？

(继续

之前的注意事项：我看到您所有模块名称中的.js扩展。切勿在模块名称中放置.js，除非您有理由强制您添加.js。

我认为/static/require/main(没有扩展(包含您的 RequireJS 配置。您遇到的问题是 RequireJS 异步加载所有模块，但您需要在加载其他任何模块之前加载您的配置。一种解决方案是像您一样嵌套require调用。

另一种解决方案是同步加载配置：

<script type="text/javascript" src="lib/requirejs/require.js"></script>
<script type="text/javascript" src="requirejs-config.js"></script>

第一行加载 RequireJS，第二行加载包含对 require.config 的调用的脚本。它保证在 RequireJS 加载其他任何内容之前加载。如果这样做，则无法使用data-main，因为data-main命名的模块将在加载配置之前加载。

我在代码中注意到的另一件事是，您使用模块名称(第一个参数(调用define。您应该省略模块名称，并让r.js在优化代码时添加它们。这里的原则与扩展相同，仅当您可以引用这样做的重要原因时，才添加模块名称。否则，不要。

相关文章：