svelte - 在 svelte 上安装美人鱼

Question

我正在尝试安装带有 Svelte 的 Mermaid 来制作图表。所以我做了以下事情:

npm 安装美人鱼

然后我得到以下内容:

npm WARN svelte-app@1.0.0 No repository field.
npm WARN svelte-app@1.0.0 No license field.

+ mermaid@8.5.2
updated 1 package and audited 142 packages in 5.939s

然后当我尝试运行我的服务器时，我得到:

bundles src/main.js → public/build/bundle.js...
[!] Error: Could not resolve './Mermaid.svelte' from src/pages/Statistics.svelte
Error: Could not resolve './Mermaid.svelte' from src/pages/Statistics.svelte
    at error (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at ModuleLoader.handleResolveId (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:12410:24)
    at ModuleLoader.<anonymous> (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:12298:30)
    at Generator.next (<anonymous>)
    at fulfilled (/Users/evgeniyanagornaya/projects/anyhow/node_modules/rollup/dist/shared/node-entry.js:38:28)

谁能告诉我这是怎么回事，我该如何解决这个问题？谢谢!

Answer 1

正如 Stephane 所说，您似乎正在尝试导入一个名为 Mermaid.svelte 的文件，但找不到该文件。它看起来不像是安装问题。我已经为自己尝试过美人鱼，它似乎没有问题。都有包裹和汇总。您实际上可以使用美人鱼示例，只需进行最小的更改。但是，我建议绑定(bind)到特定节点:

<script>
    import mermaid from 'mermaid';
    import { onMount } from 'svelte';

    let graph = null;
    let gantt = null;

    mermaid.initialize({
        startOnLoad: false,

        theme: 'forest',
        gantt: { axisFormatter: [
            ['%Y-%m-%d', (d) => {
                return d.getDay() === 1
            }]
        ] }
    });

    onMount(() => {
        mermaid.init([ graph, gantt ]);
    });
</script>

<main>
    <pre bind:this={graph}>
graph LR
A-->B
    </pre>
    <pre bind:this={gantt}>
gantt
title A Gantt Diagram
dateFormat  YYYY-MM-DD
section Section
A task           :a1, 2014-01-01, 30d
Another task     :after a1  , 20d
section Another
Task in sec      :2014-01-12  , 12d
another task      : 24d
    </pre>
</main>

不幸的是，这在 REPL 中不起作用，因为它无法导入 d3 依赖项。