javascript - Dojo 和 RequireJS : Error: defineAlreadyDefined(…) when using both on a site

Question

我试图创建一个自定义的可嵌入小部件，我的用户可以将其包含在他们的网站上。

我们提供代码，然后将其添加到他们的网站，然后他们就可以访问我们从 SaaS 生成的一堆自定义小部件。

如果他们尝试嵌入小部件的网站尚未使用 requirejs，那么这非常有用，但是，当它已经使用 requirejs 时，我们会得到可怕的...

错误:控制台中的defineAlreadyDefined(…)错误。

我们正在做的事情如下:

我们提供给他们的代码

他们会收到向其网站添加类似内容的说明:

    var foobar_load = function(){
        require([ 
          "foobar/rental!53891", 
          "widget/PriceAvailabilityCalculator" ,
          "foobar/widget!/property/53891",

        ], function( Bridge, PriceAvailabilityCalculator, Availability){

            new  PriceAvailabilityCalculator({}).place("widget-container-1");          

            Availability.place("widget-container-2");
        });
    };

    (function() {
        var d = document,
            h = d.getElementsByTagName('head')[0],
            s = d.createElement('script');

        s.type = 'text/javascript';
        s.async = true;
        s.src = 'https://www.example.com/v1/sdk.js';
        h.appendChild(s);
    } )();
</script>

然后，这将加载我们的“sdk”代码，该代码只是一般引导过程的包装器，您需要执行该过程才能在您的网站上包含 dojo。

加载器代码

所以它看起来像这样:

dojoConfig = {     
    async: true,      
    parseOnLoad: false,
    locale: 'en-gb',
    selectorEngine: 'css3',
    paths: {         
        't'         : '//dev.foobar.com/utils/i18n',
        'my'        : '//dev.foobar.com/js/custom/my',
        'foobar'    : '//dev.foobar.com/js/sdk',
        'widget'    : '//dev.foobar.com/js/custom/my/frontend'
    },
    packages: [              
        { name: 'currency', location: '//dev.foobar.com/currency' },
        { name: 'x-application', location: '//dev.foobar.com/x-application' }
    ]
};    

(function() {
    var d = document,
        h = d.getElementsByTagName('head')[0],
        s = d.createElement('script');

    s.type = 'text/javascript';
    s.async = true;
    // If foobar_load is missing.. what should happen?

    s.onload= function(){ 
        require(["dojo/ready", "dojo/domReady!", 'x-application'], 
            function(ready, x,r){                                        
            ready(0,  foobar_load );            
        });
    };

    s.src = '//dev.foobar.com/js/dojo/1_9_7/dojo/dojo.js?load';
    h.appendChild(s);
} )();

现在，我不确定我们需要做什么才能确保我们可以在也使用 RequireJS 的网站上使用此自定义代码。

Answer 1

在 #dojo IRC 上尝试并获得一些建议后，这是我正在使用的解决方案。

这不是一个非常干净的解决方案，但它确实有效。 如果您有更清晰的解决方案，请发布您的想法。。我将其留在这里是为了帮助其他遇到同样问题的人。

这个想法是切换出 require 和 define 函数，然后在 dojo.js 完成加载后将它们切换回来。 (更干净的解决方案是根本不加载 dojo.js)。

看起来像这样:

第一

    if(typeof define !== "undefined" && typeof require !== "undefined"){
        window.__define = window.define;
        window.__require = window.require;
        window.define = undefined;
        window.require = undefined;
    }

然后在加载dojo.js之后

 if( typeof window.__define !== "undefined" ) {
        window.define = window.__define;
        window.require = window.__require;
        window.__define = undefined;
        window.__require = undefined;
 }