3

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

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 如何处理人们经常重复使用常用名称的事实，比如utilsor index？

4

1 回答 1

4

直接使用 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不要在输出中绊倒对方的脚趾。

于 2019-11-07T15:30:36.520 回答