如何更改纤细组件的类名？

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 Item extends _internal.SvelteComponentDev {

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

所以我的问题是：如何在不更改文件名的情况下解决此冲突？当然有一种方法可以更改组件的类名，我只是在文档中找不到它。

如果没有办法解决它，那么 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 在输出。