javascript - 如何集成 mixpanel 和 requirejs？

Question

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

但是当我尝试加载 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

我发现了混合面板片段，我猜你在libs/mixpanel/mixpanel.js中使用了它正在添加异步 <script>下载完整 mixpanel 库的标签。由于 RequireJS 阻止 mixpanel变量被附加到窗口，它永远不会更新。

我仍在尝试找出如何使其发挥作用，如果我弄清楚，我将编辑此答案。

编辑:

我发现 mixpanel 期望能够重新分配 window.mixpanel 。因此，根据您的情况，您可以执行以下操作:

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

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