标签: svelte

我想知道我是否能够从一个普通的 .js 文件访问我的Svelte存储值。

我正在尝试编写返回基于存储值的动态值的函数，以将它们导入任何组件。但在一个普通的 .js 文件中，我不能只用 $ 符号访问存储值..

使用存储值并可用于多个组件的基本函数的快速示例：

//in .svelte

function add() {
    $counter = $counter + 1;
 }

编辑：改写一下

编辑： 找到了一个解决方案，但我真的不知道它是否真的优化了..

//in .js file

import { get } from "svelte/store";
import { counter } from "./stores";

export function add() {
    var counterRef = get(counter);
    counter.set(counterRef + 1);
}

我正在将 sveltekit 部署到 dfinity 容器，并且需要禁用缩小来调试。

我必须构建一个静态版本来部署它npm run build——是否有一个 vite 选项来禁用缩小？

我已经尝试过这个：svelte.config.js但它没有做任何事情：

vite: {
    resolve: {
        alias: {
            $components: path.resolve('./src/components'),
            $stores: path.resolve('./src/stores'),
            $api: path.resolve('./src/api')
        }
    },
    build: {
        minify: false
    }
}

我正在使用 svelte 和on:click按钮上的事件。单击此按钮时，我将一些信息发送到更高的组件。我想做的是按回车键，但on:keydown似乎不起作用？我怎样才能在按下回车键时触发它？

<button on:click={() => 
   dispatch('search', { searchword: item })}
>ClickMe</button>

<button on:keydown={() => 
   dispatch('search', { searchword: item })}
>PressEnter</button>

是否可以在苗条组件的脚本标签内编写 Typescript？

我遇到了https://github.com/pyoner/svelte-typescript/tree/master/packages/preprocess 如果我理解正确的话，这是一个用于 svelte 的打字稿预处理器，它允许在 svelte 组件中编写打字稿。但是我无法让它工作

这是我的汇总配置的样子

import svelte from "rollup-plugin-svelte";
import resolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace";
import commonjs from "rollup-plugin-commonjs";
import serve from "rollup-plugin-serve";
import livereload from "rollup-plugin-livereload";
import copy from "rollup-plugin-copy";
import typescript from "rollup-plugin-typescript2";
import { terser } from "rollup-plugin-terser";

import {
  preprocess,
  createEnv,
  readConfigFile
} from "@pyoner/svelte-ts-preprocess";

const tsEnv = createEnv();
const compilerOptions = readConfigFile(tsEnv);
const opts = {
  env: tsEnv,
  compilerOptions: {
    ...compilerOptions,
    allowNonTsExtensions: true
  }
};

const env = …

我想知道是否有办法避免冻结整个 Svelte 应用程序的异常？

我目前正在使用 Svelte v3.12.0，看起来如果存在未捕获的异常，整个前端应用程序就会冻结并且无法从错误中恢复。我不认为将每个组件中的每一行代码包装在 try...catch... 中是一个很好的解决方案。

您如何使用 Svelte 进行代码拆分？

（我知道您可以使用 Sapper 来完成，但我不想依赖节点后端）

目前，在拥有on:click | preventDefault="{() => showDetail({id})}" 和使用showDetail功能中，我想导航到id我正在通过单击按钮传递的特定位置。

我尝试了常规的 javascript 方法location.assign，但这会重新加载页面并破坏 SPA 的目的。有没有什么方法可以在不重新加载的情况下以 svelte 方式导航

我需要运行一个 Svelte 应用程序并且能够在没有服务器的情况下执行它。对于其他框架，这是可能的，因为它只是 javascript，但我找不到一种方法来单击我的 index.html 并运行使用 Svelte 构建的应用程序

我的一个组件订阅了商店中的一个变量。每当该存储变量发生变化时，我想触发一个函数。

商店.js

    import { writable } from "svelte/store"; 
    export const comparedProducts = writable([1,2,3]);

组件.svelte

    import { comparedProducts } from "../stores.js";
    
    //if there is a change in $comparedProducts trigger this function eg. ([1,2])
    const someFunction = () => {
      //do something
    }

我有大约 80 个自定义 SVG 图标，我将它们导入到 Svelte 前端应用程序中。它基于https://github.com/sveltejs/template构建，使用 Rollup 构建，包括 Typescript、Tailwind 和所有现代好东西。

困境在于如何将图标添加到应用程序中。作为 SVG，图标是不超过 2kB 的简短 XML 文本字符串。

选项 1：作为图像资产

1. 将所有图标上传foo.svg到public/assets/icons.
2. 创建一个<Icon type="foo' />使用<img src="foo.svg>.

这种方法意味着图标不是代码的一部分。

优点：图标可以由前端代码按需动态加载。无需将所有图标捆绑到应用程序代码中。

缺点：如果有很多新图标，页面加载速度会很慢，并且浏览器必须获取十几个 1kB 文件。将应用程序部署为 PWA 意味着我们需要手动告诉它预先缓存图标。

选项 2：作为应用程序构建的一部分

1. 使用类似https://github.com/cristovao-trevisan/svelte-icon或https://github.com/codefeathers/rollup-plugin-svelte-svg 之类的东西将每个图标直接导入到代码中：import Home from './icons/home.svg';
2. 创建一个 svelte 组件，选择正确的导入组件或 SVG 字符串并显示它。

在这里，图标作为文本字符串与应用程序本身捆绑在一起。

优点：图标作为应用程序包的一部分提供。缓存是不必要的。可以在加载时动态修改一些图标代码，例如颜色、视图框等。

缺点：没有必要在应用程序中包含所有图标以减少到第一个字节的时间。不能在不增加复杂性的情况下进行捆绑拆分等。使渲染变慢，因为 Javascript 代码需要首先将字符串转换为 SVG，而不仅仅是加载图像。

问题

• 从这个分析来看，在应用程序中构建图标似乎是一个更好的方法，但我错过了什么吗？
• 如果“图标”是 50-100kB 的详细图像而不是这里的小字符串，那么演算会改变吗？