【问题标题】：Dojo and RequireJS : Error: defineAlreadyDefined(…) when using both on a siteDojo 和 RequireJS : 错误：defineAlreadyDefined(...) 在站点上同时使用两者时
【发布时间】：2016-04-04 15:47:19
【问题描述】：

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

我们提供代码，然后将其添加到他们的网站，然后他们就可以访问我们从 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 的网站上使用此自定义代码。

【问题讨论】：

到目前为止你尝试了什么？你提供内置的javascript还是原始的javascript？
对于我正在做的这个版本，它是原始的未构建的。但是一旦我投入生产，它就会被构建。至于我已经尝试过什么......我会回答我的问题......因为我有一个解决方案，但它真的很hacky。

标签： javascript dojo requirejs amd

【解决方案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;
 }

【讨论】：