在 SvelteKit 组件中使用静态 .js 文件中的变量

问题描述 投票:0回答:1

我正在尝试使用 SvelteKit 和 sveltekit-adapter-chrome-extension 创建一个 Chrome 扩展。我在

anilist_client.js
下有一个
/static
文件,我在其中声明一个
ANILIST_CLIENT
对象,该对象存储一个 ID 和一个 SECRET,稍后将用于访问 AniList API.

文件必须在 /static 目录中,这样用户就可以用自己的 ID 替换 ID,而无需深入研究捆绑代码。

我尝试将脚本包含在

app.html
<svelte:head>
中,也遵循了this guide。我得到的只是“anilist_client is not defined”。

// static/anilist_client.js

const anilist_client = {
    id: '<id>',
    secret: '<secret>'
};
// src/lib/components/Options.svelte

<script>
    console.log(anilist_client.secret);
</script>

<a href='https://anilist.co/api/v2/oauth/authorize?client_id={anilist_client.id}&response_type=token'>Login with AniList</a>
// src/app.html

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width" />
    <script src="/anilist_client.js"></script>
    <!-- <script src="%sveltekit.assets%/anilist_client.js"></script> -->
    %sveltekit.head%
</head>
// svelte.config.js

import chromeExtensionAdapter from 'sveltekit-adapter-chrome-extension';
import { vitePreprocess } from '@sveltejs/kit/vite';
const config = {
    preprocess: vitePreprocess(),

    kit: {
        adapter: chromeExtensionAdapter({
            pages: 'build',
            assets: 'build',
            fallback: null,
            precompress: false,
            manifest: 'manifest.json',
        }),
        appDir: 'ext',
    }
};

export default config;

有没有办法从我的组件中访问这个对象,这些组件将在开发和生产包中运行?感觉我在这里遗漏了一些非常明显的东西。

javascript static vite sveltekit
1个回答
0
投票

您似乎在尝试使用

const
定义全局变量。如果有的话,我认为你应该使用
var
,而不是const.

但我离题了,因为有更好的选择。马上,您可以将

aniList_client
对象附加到全局对象,通常是
window
在浏览器中。试试这个:

globalThis.aniList_client = {
    id: blah,
    secret: blahblah
}

然后以同样的方式访问它(

globalThis.aniList_client
)。

另一种选择是使您的静态 JS 成为 ESM 模块并在

<head>
:

中加载它
<head>
    ...
    <script src="/aniList_client.js" type="module"></script>
    ...
</head>
...

然后您可以将所述文件编写为导出数据的 ESM:

export default const aniList_client = {
    ...
};

后者可能需要您发出信号

rollup
webpack
您的模块是外部的。不过,我没有这方面的具体细节。

© www.soinside.com 2019 - 2024. All rights reserved.