如何更改 svelte 组件的 class 名称？

Question

我有多个文件名称相同，但来自完全不同的位置。这是一个简化的例子：

AdminViews/Item.svelte
ClientViews/Item.svelte
DefaultViews/Item.svelte

我尝试从同一个文件中导入它们，如下所示：

import AdminItem from 'AdminViews/Item.svelte';
import ClientItem from 'ClientViews/Item.svelte';
import DefaultItem from 'DefaultViews/Item.svelte';

即使我将它们作为不同的名称导入，它们都引用最后导入的那个。经过调查，看起来这是因为 svelte 将 class 名称设置为文件名，而不考虑路径，例如：

class Item extends _internal.SvelteComponentDev {

它们都是相同的，所以当它们被导入时，它们各自覆盖上面的。

所以我的问题是：如何在不更改文件名的情况下修复此冲突？当然有办法更改组件的 class 名称，我只是在文档中找不到它。

如果没有办法解决它，那么 svelte 如何处理人们经常重复使用通用名称这一事实，例如 utils 或 index？

Answer 1

直接使用Svelte编译器，你可以传入任何你喜欢的name:

const compiled = svelte.compile(code, {
  name: 'Potato'
});

不幸的是，大多数时候您通过 rollup-plugin-svelte 或 svelte-loader 之类的东西间接地与编译器交互。目前，这些插件不提供控制每个组件名称的方法——理想情况下，它们会让您指定一个 filename => name 函数，如果返回任何内容，该函数将覆盖默认行为。（如果您愿意，这可能值得提出一个问题）。

对于像 src/Thingamajig/index.svelte 这样的文件名，index 已经被删除，取而代之的是 Thingamajig。就 Svelte 而言，其他冲突无关紧要，因为名称位于不同的模块中——打包器的工作是确保 Item、Item 和 Item 不会出错输出中彼此的脚趾。

如何更改 svelte 组件的 class 名称？

How can I change the class name of a svelte component?

javascript

svelte

svelte-component