如何全局初始化服务并导出以供 svelte js 中的其他模块使用

Question

我正在尝试将 mixpanel 集成到我的 svelte 项目中。要初始化 mixpanel 实例，我需要执行类似的操作：

import {mixpanel} from 'mixpanel-browser'

mixpanel.init('TOKEN', {options});

// and then can use it's functions like 

mixpanel.track('user_Action')
mixapnel.identify('...')

对每个文件都执行此操作似乎不是一个好主意，但我如何在 svelte 中执行此操作？就像在一个地方实例化它然后在其他地方使用它？

Answer 1

在根+layout.js中初始化mixpanel并将其作为布局数据道具返回。

布局的所有子级都可以访问父布局数据属性作为其 PageData 属性的一部分。

Answer 2

放入

+layout.js

中

import { PUBLIC_MIXPANEL_TOKEN } from "$env/static/public";
import mixpanel from 'mixpanel-browser';

mixpanel.init(PUBLIC_MIXPANEL_TOKEN, { debug: true });

在您要跟踪的页面中，例如

+page.svelte

import mixpanel from "mixpanel-browser";

onMount(() => {
    mixpanel.track("HomePage", { name: 'Alok' });
});