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 {

所有这些都是相同的，因此在导入它们时，它们每个都将覆盖上面的一个。

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

如果没有解决的方法，那么如何解决人们经常重复使用通用名称（例如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不跳闸在输出中超过彼此的脚趾。

如何更改标准组件的类名？

1 个答案: