Dojo和RequireJS：错误：在网站上同时使用两者时，defineAlreadyDefined（...）

Question

我正在尝试创建一个自定义可嵌入的小部件，我的用户可以在其网站上添加该小部件。

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

如果他们试图在小部件上嵌入小部件的网站尚未使用requirejs，这非常有用，但是，当它已经使用requirejs时，我们会感到害怕......

控制台中出现

Error: 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;
 }