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

时间:2019-11-07 00:16:18

标签: javascript svelte svelte-component

我有多个文件名相同,但来自完全不同的位置。这是一个简化的示例:

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 {

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

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

如果没有解决的方法,那么如何解决人们经常重复使用通用名称(例如utilsindex)这一事实呢?

1 个答案:

答案 0 :(得分:2)

直接使用Svelte编译器,您可以传递任何喜欢的name

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

不幸的是,大多数情况下,您是通过诸如rollup-plugin-svelte或svelte-loader之类的方法与编译器间接交互的。当前,这些插件没有提供控制每个组件名称的方法-理想情况下,它们可以让您指定一个filename => name函数,该函数可以在返回任何内容时覆盖默认行为。 (如果您愿意的话,这也许值得一提)。

对于诸如src/Thingamajig/index.svelte之类的文件名,index已被删除,取而代之的是Thingamajig。就Svelte而言,其他冲突无关紧要,因为名称在单独的模块中-捆绑程序的工作是确保ItemItemItem不跳闸在输出中超过彼此的脚趾。