Как интегрировать mixpanel и requirejs?

Question

Я использую RequireJS для загрузки всех моих javascript в виде модулей AMD. В частности, я использую конфигурацию «прокладки» для загрузки модулей без AMD.

Но я получаю объект «undefined», когда я пытался загрузить MixPanel.

Вот соответствующие файлы, с моей удачно подобранной Stripe js для сравнения.

main.js:

require.config({ 
    paths: { 
     stripe: 'libs/stripe/stripe', 
     mp: 'libs/mixpanel/mixpanel' 
    }, 
    shim: { 
     'stripe': { 
      exports: 'Stripe' 
     }, 
     'mp': { 
      exports: 'MP' 
     } 
    } 
}); 

libs/stripe/stripe.js и libs/mixpanel/mixpanel.js оба имеют (function() {})(); звонки, как их Документации рекомендуют.

моего payment.js (который оборачивает Stripe):

define(['jquery', 'stripe'], function ($, Stripe) { 
    var key = "MY_KEY"; 
    Stripe.setPublishableKey(key); 
}); 

моего track.js (который оборачивает MixPanel):

define(['jquery', 'mp'], function ($, MP) { 
    var token = "MY_TOKEN"; 
    MP.init(token); 
}); 

Answer 1

Я не знаком с подкладкой, но мне кажется, что вы должны иметь

'mp': { 
    exports: 'mixpanel' 
} 

, так как библиотека Mixpanel обнажает, что не window.MP.

Answer 2

Я обнаружил, что фрагмент панели микширования, который, я думаю, вы используете в libs/mixpanel/mixpanel.js, добавляет асинхронный тег <script>, который загружает полную библиотеку mixpanel. Поскольку RequireJS предотвращает привязку переменной mixpanel к окну, она никогда не обновляется.

Я все еще пытаюсь выяснить, как заставить его работать, и отредактируйте этот ответ, если я это выясню.

Edit:

Я обнаружил, что mixpanel ожидает, чтобы иметь возможность переназначить window.mixpanel. Так что в вашем случае вы могли бы сделать что-то вроде:

define(['mixpanel'], function (MP) { 
    window.mixpanel = MP; 
    window.mixpanel.init('TOKEN'); 
    ... 
}); 

И обработчиков для mixpanel должны затем использовать window.mixpanel так как это будет реальный случай.