Question

我有网站，使用内部网（小份额）以及互联网（更大的份额）。内联网环境，没有互联网接入。我打算从互联网用户的CDN加载JavaScript，同时使用本地版本的内部网用户。我正在使用 RequireJS 库动态加载脚本，并在无法从CDN检索时使用故障转移。

我使用以下requireJS配置从CDN加载jQuery库或使用本地库。

问题发生，当RequireJS无法从CDN加载时，它会在加载本地版本的jquery之前加载引导库。这导致两个错误，'Bootstrap需要来自bootstrap的jQuery'和来自requireJS的超时错误。

我的问题，如何避免这种情况？我希望bootstrap等到加载任何（CDN或本地）版本的jQuery。我使用Shim来定义jQuery库的bootstrap依赖。但是，它没有按预期工作。这是requireJS中的已知错误吗？

这里是我的配置代码

require.config({
    paths: {
        jquery: ['https://code.jquery.com/jquery-1.10.2'
            , '/Scripts/_Ref/jquery-1.10.2'],
        async: '/Scripts/_Ref/async',
        propertyParser: '/Scripts/_Ref/propertyParser',
        goog: '/Scripts/_Ref/goog',
        bootstrap: '/Scripts/_Ref/bootstrap'
    },
    shim: {
        'bootstrap': {
            deps: ['jquery']
        }
    }
});

require.onError = function (err) {
    console.log('RSC JS Error: ' + err.requireType);
    if (err.requireType === 'timeout') {
        var errorMessage = 'Following modules timeout: ' + err.requireModules;
        console.log(errorMessage);
        MyNamespace.ShowErrorMessage(errorMessage);        
    }    
};

为了证明这个问题，我创建了一个示例网站，在那里我阻止了互联网并刺激了故障转移。在这里，视频链接http://www.screencast.com/t/gcQ2I9aUdBY是我在行动中显示问题

Answer 1

听起来像CDN javascripts和RequireJS垫片不能很好地融合在一起。来自RequireJS documentation：

不要在构建中混合使用CDN加载和shim配置。示例场景：你从CDN加载jQuery但使用shim配置加载一些东西像Backbone的股票版本依赖于jQuery。当你这样做构建时，一定要在构建的文件中内联jQuery并且不要加载它来自CDN。否则，Backbone将在内置文件中内联它将在加载CDN的jQuery加载之前执行。这是因为shim配置只是延迟加载文件，直到加载依赖项，但不执行任何自动包装定义。构建之后，依赖关系已经内联，shim配置不能延迟执行非define（）'d代码直到以后。 define（）'d模块在构建之后可以使用CDN加载的代码，因为他们正确地将他们的源包装在定义工厂函数中在加载依赖项之前不执行。所以上课：shim config 是非模块化代码，遗留代码的权宜之计。定义（）倒是模块更好。

有关易于理解的说明，请参阅this StackOverflow question。

我们似乎有一些运气没有加载带有RequireJS的Bootstrap;相反，我们在<head>中使用脚本标记：

<script type="text/javascript" sync src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
   // Load jQuery if CDN fails
   window.jQuery || document.write('<script src="scripts/libs/jquery.min.js">\x3C/script>')
</script>
<script type="text/javascript" sync src="//maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
   // Load bootstrap if CDN fails
   window.jQuery.fn.dropdown || document.write('<script src="scripts/libs/bootstrap.min.js">\x3C/script>')
</script>
<script type="text/javascript">
   var require = {
      baseUrl: "scripts/",
      deps: ['main']
   };
</script>
<script type="text/javascript" src="scripts/libs/require/require.js"></script>

jQuery和Bootstrap是从CDN加载的，带有本地回退per Hanselman。

RequireJS，当发生CDN故障转移时，Shim无法正常工作

1 个答案: