在 svelte 上安装美人鱼
Installing mermaid on svelte
我正在尝试安装带有 Svelte 的 Mermaid 来制作图表。所以我做了以下事情:
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)
谁能告诉我这是怎么回事,我该如何解决这个问题?谢谢!
正如 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 的 Mermaid 来制作图表。所以我做了以下事情:
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)
谁能告诉我这是怎么回事,我该如何解决这个问题?谢谢!
正如 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 依赖项。