我正在尝试使用 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;
有没有办法从我的组件中访问这个对象,这些组件将在开发和生产包中运行?感觉我在这里遗漏了一些非常明显的东西。
您似乎在尝试使用
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
您的模块是外部的。不过,我没有这方面的具体细节。