标签: sveltekit

我将 SvelteKit (1.0.0) 与节点适配器一起使用。

我想在我的服务器上使用它并以pm2.

使用节点适配器启动 Svelte 应用程序而不使用 的最佳方式是什么npm start？

我不需要 pm2 命令，只需要 Svelte 的 npm 命令。

我正在使用 Sveltekit 建立一个相关网站。我有一个独立的“测试”组件。无需担心财产问题；没有价值可以从孩子传递给父母。

我的简单测试组件 ColorTest.svelte：

<script>
    export const fakeValue = "fake";
</script>

<h1>Color Test Patches</h1>
<div>
    <div class="box" id="a1">test</div>
    <div class="box" id="a2"></div>
    <div class="box" id="a3"></div>
    <div class="box" id="a4"></div>
    <div class="box" id="a5"></div>
</div>
<div style="width: 95%; height: 50px; float: left;"> &NonBreakingSpace; 
</div>
<div>
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
    <div class="box" id="b4"></div>
    <div class="box" id="b5"></div>
</div>
<div style="width: 95%; height: 50px; float: left;"> &NonBreakingSpace; 
</div>
<div>
    <div class="box" id="c1"></div>
    <div class="box" id="c2"></div>
    <div class="box" id="c3"></div>
    <div class="box" id="c4"></div> …

我在 Svelte 组件中有一个链接。此链接的目标由保留代理服务器处理，因此链接目标不是 Svelte 应用程序的一部分，即使它与 Svelte 应用程序共享相同的 URL 路径。

如果我单击该链接，Svelte 会尝试通过其内部路由器解析该链接。如何强制 Web 浏览器加载 Svelte 中的链接并被内部路由器跳过？

我的链接代码是：

<!-- /docs/ is served from the reverse proxy by the web server and not part of Svelte -->
<a href="https://tradingstrategy.ai/docs/index.html">Documentation</a>

我希望我的应用程序中的路线之一不要在服务器端渲染。执行此操作的方法将export const ssr = false在模块脚本中执行或ssr: false按照svelte 文档svelte.config.js中提到的设置进行设置

但即使以两种方式禁用 ssr 后，我仍然在终端中收到错误，例如localStorage is not defined禁用 ssr 时不应出现的错误。

虽然应用程序仍然可以找到。但是每当我在浏览器中重新加载页面时，终端上就会出现此错误

[vite] Error when evaluating SSR module /src/routes/index.svelte:
ReferenceError: localStorage is not defined

svelte.config.js

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),
    kit: {
        ssr: false,
        adapter: adapter({
            fallback: '200.html'
        }),
        prerender: {
            enabled: false
        },
    } …

我有以下工作（运行）代码，但收到 TypeScript 错误“ Window & typeof globalThis”类型上不存在属性“onSubmit”。。

function onSubmit() {
  . . .
}

onMount(() => {
  window.onSubmit = onSubmit; <-- Error
});

onDestroy(() => {
  window.onSubmit = null; <-- Error
});

在我的global.d.ts文件中，我尝试导出要导入的接口

export interface CustomWindow extends Window {
  onSubmit: () => void;
}

并宣布全球

declare global {
  interface Window {
    onSubmit: () => void;
  }
}

这两种解决方案均未成功，错误仍然存​​在。我们如何向 window 对象添加属性以供 TypeScript 识别？

我一直在开发 sveltekit 应用程序，最近我的主导航菜单遇到了问题。当加载或刷新应用程序时，与当前 URL 对应的当前菜单项不会设置为活动状态。（即菜单项“Home”的 URL 为“/”）我很难在网上找到任何有用的东西来演示如何设置它，但我有一个可行的解决方案，并认为我会为其他人记录它。目前很简单。

我有一个 nav.json 文件，我在其中定义应用程序中的任何菜单，从而可以轻松组织菜单。我将其导入到文件顶部并将其存储在数组中以供以后使用。

import menuObj from '../nav/nav.json';

let sidebar = menuObj.menus[0].items;

onMount()只是在加载导航组件时获取当前路径，并且只为我运行一次。

然后 - 使用<svelte:window on:click={handlePageClick}/>我们可以监听页面上的任何点击。

在该handlePageClick(e)方法中我们传递 on:click 事件。使用该事件我们可以捕获当前pathname的 URL。这允许我们检查pathname我使用 html 中的方法item.path导入和提取的 nav.json 文件中定义的内容。如果项目路由与当前路径匹配，我们可以将类设置为活动状态#each。<a>

这是完整的实现

<script>
    import menuObj from '../nav/nav.json';
    import {onMount} from "svelte";

    let path;
    let sidebar = menuObj.menus[0].items;

    onMount(() => {
        path = window.location.pathname;
    })

    function handlePageClick(e) {
        path = e.view.location.pathname;
    }

</script>

<svelte:window on:click={handlePageClick}/>
<nav class="sidebar"> …

I\xe2\x80\x99ve 使用 Turborepo 创建了一个 monorepo，其中包含 2 个 SvelteKit 应用程序和 2 个包：一个组件库（也基于 SvelteKit）和一个配置包。

root\n|\n|- packages\n|   |- component-library\n|   `- config\n|\n`- apps\n    |- app1\n    `- app2\n

配置包包含 Tailwind 和 PostCSS 配置文件，它们在组件库和两个应用程序中使用。

我的问题是，从组件库导入的组件在app1中正确显示，但app2中的 Tailwind 类似乎存在问题。有些课程存在，但有些则不存在。I\xe2\x80\x99m 在 JIT 模式下使用 Tailwind。

使用的包的版本：

"turbo": "^1.2.4",\n"svelte": "^3.34.0",\n"@sveltejs/kit": "1.0.0-next.316",\n"tailwindcss": "3.0.23",\n

我\xe2\x80\x99m 甚至不确定这是否是因为 SvelteKit，但如果有人有类似 Turborepo-SvelteKit-Tailwind 设置的经验，我将不胜感激。

我使用适配器节点使用 vite 和 sveltekit 时遇到此构建错误

我不确定为什么它无法构建，因为它依赖节点来为客户端提供服务。

开发工作正常

'Buffer' is not exported by __vite-browser-external:buffer

我尝试了 polyfill，但它们不起作用。

            optimizeDeps: {
                esbuildOptions: {
                    // Node.js global to browser globalThis
                    define: {
                        global: 'globalThis'
                    },
                    // Enable esbuild polyfill plugins
                    plugins: [
                        NodeGlobalsPolyfillPlugin({
                            process: true,
                            buffer: true,
                            webworkers: true,
                        }),
                        NodeModulesPolyfillPlugin()
                    ]
                }
            },
            build: {
                minify: true,
                rollupOptions: {
                    plugins: [
                        // Enable rollup polyfills plugin
                        // used during production bundling
                        rollupNodePolyFill()
                    ]
                }
            }

我正在构建一个需要从任何来源访问 sveltkit 端点的嵌入。

如果我使用express，我会简单地使用cors中间件。

我很好奇是否有办法在 sveltkit 端点上启用 CORS，这样我就不需要启动另一个服务。

到目前为止我尝试过的一些事情：

• 从端点中的获取句柄返回“Access-Control-Allow-Origin”：“*”

• 覆盖 OPTIONS http 方法（似乎从未被调用）

• 我看到了这个reddit 帖子，但它似乎已经过时了。

我正在尝试使用此库抓取 LinkedIn 个人资料： https://www.npmjs.com/package/@nhn/linkedin-profile-scraper。这是我的代码：

<script>
import { LinkedInProfileScraper } from '@matidiaz/linkedin-profile-scraper';
    import { onMount } from 'svelte';
    import { session } from '$app/stores';

    onMount(async () => {
        const token = session?.provider_token;
    console.log(token);
        const scraper = new LinkedInProfileScraper({
            sessionCookieValue: token,
            keepAlive: false
        });

        // Prepare the scraper
        // Loading it in memory
        await scraper.setup();

        const result = await scraper.run('https://www.linkedin.com/in/jvandenaardweg/');

        console.log(result);
    });
</script>

我正在使用 sveltekit 来获取信息，有人可以指出如何解决这个问题，我在网上找不到太多信息。