我如何才能以有效、干练的方式使用 Svelte.js 的 Smelte material 设计库？

Question

我正在使用 Svelte 和 material 设计库 Smelte 进行一个项目。根据 Smelte 文档 (smeltejs.com)，我必须在 每个文件 中导入 每个组件 我 want/need 才能使用例如，在 src\pages\index.svelte:

<script>
  import Button from "smelte/src/components/Button";
  import Icon from "smelte/src/components/Icon";
</script>

在 src\App.svelte 中使用上面的行不起作用。

这相当繁琐且无效。每个页面都需要库的许多组件。

我如何才能导入所有（或大部分）库的组件并能够在任何文件中使用它们？

Answer 1

如果您真的只想对 Smelte 中的所有内容进行简单的一行导入，并且您不关心 tree-shaking，您总是可以 import * as Smelte from 'smelte' 在脚本标签中替换 Smelte无论您希望组件标签修饰符是什么。

为了使用你需要像这样使用修饰符的组件<Smelte.Button>

这里有一个 REPL 展示它（减去 Smelte 样式）。

但是，如果您只想将一些作为单个语句导入，您可以使用类似的技巧，只从单独的 JS 文件中导出您需要的那些。有很多方法可以导出它，但以下是其中一种：

// somefile.js
import Button from "smelte/src/components/Button"
import Treeview from "smelte/src/components/Treeview"

export {
  Button,
  Treeview
}

然后在您的 Svelte 文件中，您可以 import * as Smelte from './somefile.js' 并以与第一种方法相同的方式访问这些组件。

这里还有一个 REPL。

很确定这两种方式都会带来一些 treeshaking 的复杂性，但你的脚本标签会不那么混乱，你不必担心导入你需要的每一个部分。

我如何才能以有效、干练的方式使用 Svelte.js 的 Smelte material 设计库？

How can I use the Smelte material design library for Svelte.js in an effective, dry, manner?

javascript

material-design

svelte