Asynchronous 是否将requireJS模块内联到HTML正文中？_Asynchronous_Javascript_Requirejs_Js Amd

Asynchronous 是否将requireJS模块内联到HTML正文中？

asynchronous javascript requirejs

Asynchronous 是否将requireJS模块内联到HTML正文中？,asynchronous,javascript,requirejs,js-amd,Asynchronous,Javascript,Requirejs,Js Amd,我正在CMS中集成RequireJS，因此我将其放在页面模板的底部： <html> <body> {Placeholder1} <script src="scripts/require.js" data-main="scripts/main"></script> {Placeholder2} </body> </html> 我尝试在页眉中加载RequireJS和main，但结果不一致。有时候jquery、uti

我正在CMS中集成RequireJS，因此我将其放在页面模板的底部：

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

我尝试在页眉中加载RequireJS和main，但结果不一致。有时候jquery、utils和slider会及时加载，而有时候不会。这就好像页面底部的内联“require”不知道页面上的主RequireJS或依赖规则，但我的断点在main.js中命中，所以我知道正在调用它。是不是因为main.js是异步加载的，而页面底部的内联“require”块是在页面呈现时加载的？我该怎么做

我以前成功使用过RequireJS，但没有CMS。我总是使用“define”，总是异步调用模块，但从来没有像这样内联调用过RequireJS函数。关于正确的方法有什么想法吗？

看起来正在发生的事情是，main.js正在异步加载，而内联require立即被调用。这就是结果不一致的原因。解决方案是不使用data main属性，而是通过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,
....

这里重要的一点是，在请求任何模块之前设置配置选项。正如您正确地指出的，存在竞争条件，这意味着您的

main.js

中的配置选项没有及时加载。最简单的方法是在加载

require.js

脚本之前将配置选项内联

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


var require={
baseUrl:，
路径：{
//等
}
}

再往下看：

<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>

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


要求([
“jquery”，
“utils”，
“滑块”
]，函数（$，utils，滑块）{
slider.start（）；
});

另请参见

，或者您可以将内联代码放在main.js文件中。或者您可以将路径定义放入内联代码块中。使用RequireJS的原因之一是为了避免依赖全局变量，所以请避免这样做。@Simon，thx的建议。对于CMS系统，这是很难避免的。在我看来，几乎所有的CMS都过时了。添加了一个答案，因为它太长了；）这简直快把我逼疯了！非常感谢。愚蠢的部分是：我在一年前就遇到了这个问题，但我没有马上想到。这种设置的一个问题是，当脚本/主文件包含多个模块时，资源可能会被加载两次（通常是在使用r.js优化器时）。如果这是一个不使用require定义的文件，这将是一个特别的问题。让我们假设

scripts/main

文件包含较少的JS模块。此外，假设内联require调用也需要此模块。现在，如果在加载主脚本之前访问内联调用（通常情况下），模块将获得两次。如果内容不是AMD模块，则可能导致错误！

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