2

我正在尝试使用 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)

谁能告诉我发生了什么以及如何解决这个问题？谢谢！

4

1 回答 1

1

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

<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 依赖项。

于 2020-07-11T08:44:22.727 回答