使用mdsvex在Svelte组件中运行时编译markdown

Question

我正试图在Svelte模板中获取一个包含markdown的字符串，并使用mdsvex将其作为Svelte组件的一部分。我在App.Svelte中有以下代码：

<script>
import { compile } from 'mdsvex';
import Counter from './lib/Counter.svelte'
const transformed_code = compile(`
# Hello world
This is a paragraph
<Counter />
`, {});
</script>
<div id="content"></div>

完成后，我想将结果添加到#content框中。当我运行编译步骤时，我得到以下错误：

未捕获(承诺中(引用错误：进程未定义

我到底做错了什么？使用mdsvex真的可以做到这一点吗？谢谢你的帮助？

Answer 1

该模块将在服务器上使用，并使用Node变量process。操场页面根据以下内容填充变量：https://github.com/defunctzombie/node-process/blob/master/browser.js

您可以像那样定义一个process对象，并将其分配到窗口上。确保此代码在客户端上运行：

window.process = { /* fake process here */ }

一旦完成，代码就会执行，但Counter不会像这样工作；导入没有任何作用。mdsvex的输出必须使用Svelte进行编译，Svelte生成试图访问未定义的Counter组件的代码。

有多种可能的方法：

• 以某种方式注入导入的组件构造函数，例如通过道具(尽管由于未设置target选项，我遇到了错误(
• 像这样预编译要使用的任何组件，并使其可用作可以从编译输出导入的路由
• 动态编译组件。您需要有一些方法来获取要处理的组件源代码

如果您有嵌套的组件导入，选项2可能是最可行的，因为您可以在生成编译输出时调整所有导入URL。