负载requireJS模块内嵌HTML主体？(Load requireJS module inlin

我整合RequireJS在CMS所以我把这个在我的页面模板的底部：

<html>
<body>
  {Placeholder1}
  <script src="scripts/require.js" data-main="scripts/main"></script>
  {Placeholder2}
</body>
</html>

然后在每一页上，我想创建一个利用RequireJS功能。所以，我想在页面的底部放置这样的：

<html>
<body>
    <h1>Home</h1>
    <div class="slider">Slider content</div>

    <script src="scripts/require.js" data-main="scripts/main"></script>

    <script type="text/javascript">
      require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
    </script>
</body>
</html>

但我得到404级的jQuery的，utils的和滑块js文件。现在看来似乎不读书我main.js CONFIGS，我有：

require.config({
    paths: {
        jquery: 'libs/jquery-1.8.1.min',
        utils: 'libs/utils',
        slider: 'libs/jquery.slider.min'
    },
    shim: {
        slider: ['jquery']
    }
});

require([ 'utils' ], function (utils) {
    utils.init();
});

我试图加载RequireJS和主要在页面头部，但得到不一致的结果的方式。有时jQuery的，utils的和滑块将在时间和其他时间没有加载。这是因为如果内联“规定”在页面的底部是不知道网页上的主要RequireJS或依赖关系规则的，但我在main.js的断点，所以我知道它被调用。是不是因为main.js获取异步加载，但我的内联“要求”在页面的底部块加载页面上呈现？如何解决这个问题？

我已经使用RequireJS成功过，但没有一个CMS。我总是用“定义”，不得不模块总是异步地叫，但从来没有打电话给RequireJS内联函数这样。在正确的道路任何想法做到这一点？

Answer 1:

这里最重要的是，被请求的任何模块之前的配置选项设置。正如你已经正确地指出，有竞争条件意味着在你的配置选项main.js没有及时装载。最简单的方式轮这将是把配置选项内联之前require.js加载脚本。

<script>
var require = {
    baseUrl: <?= $someVar ?>,
    paths: {
        // etc
    }
}
</script>
<script src="scripts/require.js" data-main="scripts/main"></script>

再往下是页面：

<script>
    require([
        'jquery',
        'utils',
        'slider'
      ], function ($, utils, slider) {
        slider.start();
      });
</script>

另请参阅如何RequireJS多页和局部视图的工作？

Answer 2:

这似乎是正在发生的事情是，main.js正在异步加载，而需要内嵌调用的时候了。这就是为什么有不一致的结果。解决的办法是不使用的数据主要属性，并通过require.js脚本标签下方script标签调用main.js文件。

您仍然可以在那里做这个决定从加载main.js文件中的baseUrl：

//DETERMINE BASE URL FROM CURRENT SCRIPT PATH
var scripts = document.getElementsByTagName("script");
var src = scripts[scripts.length-1].src;
var baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/'));

//CONFIGURE LIBRARIES AND DEPENDENCIES VIA REQUIREJS
require.config({
    baseUrl: baseUrl,
....

文章来源: Load requireJS module inline the HTML body?