如何集成mixpanel和requirejs？

Question

我正在使用RequireJS加载我所有的javascript作为AMD模块。具体地说，我使用"shim“配置来加载非AMD模块。

但是当我试图加载MixPanel时，我得到了一个“未定义”的对象。

下面是相关的文件，与我的成功填充的条纹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 (包装条纹)：

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

my track.js (包装MixPanel)：

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

Answer 1

我发现您在libs/mixpanel/mixpanel.js中使用的mix面板片段添加了一个异步<script>标记，该标记可下载完整的mixpanel库。由于RequireJS阻止将mixpanel变量附加到窗口，因此它永远不会更新。

我仍然在试图弄清楚如何让它工作，如果我弄清楚了，我会编辑这个答案。

编辑：

我发现mixpanel希望能够重新分配window.mixpanel。因此，在您的情况下，您可以这样做：

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

然后，mixpanel的处理程序应该使用window.mixpanel，因为这将是真正的实例。

Answer 2

我对shim不熟悉，但看起来你应该

'mp': {
    exports: 'mixpanel'
}

因为Mixpanel库公开了这一点，而不是window.MP。