Question

我正在尝试将人鱼与Svelte一起安装以制作图形。所以我做了以下事情：

npm install mermaid

然后我得到以下信息：

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的文件，但找不到该文件。它看起来不像是安装问题。我为自己尝试了美人鱼，它似乎没有问题。带有包裹和汇总。您实际上可以使用美人鱼示例，而只需进行很少的更改。但是，我建议绑定到特定节点：

<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依赖项时遇到问题。

在Svelte上安装美人鱼

1 个答案: