Svelte预处理Markdown教程

48 0 0

Svelte预处理Markdown教程

svelte-preprocess-markdownWrite Svelte components in markdown syntax项目地址:https://gitcode.com/gh_mirrors/sv/svelte-preprocess-markdown

本教程旨在引导您了解并使用AlexxNB/svelte-preprocess-markdown这一开源项目，它使您能够以Markdown语法编写Svelte组件。我们将逐一探索其关键组成部分，包括目录结构、启动与配置细节。

1. 项目目录结构及介绍

Svelte预处理Markdown项目通常遵循标准的Svelte应用布局，虽然具体的内部结构可能会根据开发者习惯有所不同。一个典型的结构可能包含以下部分：

src: 核心源代码存放地，其中包括您的Svelte组件和Markdown文件转换成的Svelte组件。

src/ └── components/ ├── MyComponent.svelte └── MyMarkdownPage.md

docs_src: 如果项目包含示例或文档，这些Markdown文件会被处理。
tests: 测试文件夹，用于存放单元测试或集成测试。
rollup.config.js: 打包配置文件，对于本项目至关重要，因为它包含了如何处理.md文件的指令。
package.json: 包含了项目的元数据，依赖项以及脚本命令。
README.md: 项目的主要说明文档，介绍了项目的目的和基本使用方法。

2. 项目的启动文件介绍

在本项目中，虽然没有明确提到“启动文件”，但关键在于配置和编译流程的起点——通常是package.json中的脚本命令以及rollup.config.js。运行项目主要依赖于npm脚本，比如常见的启动命令可能是通过npm的scripts执行Rollup或者Vue CLI等构建工具来编译和启动应用。

package.json 中的 scripts 部分定义了开发循环的入口，例如：
```
"scripts": {
    "start": "rollup -c -w",
    "build": "rollup -c"
}
```
其中，start 命令通常用于开发模式下自动重新编译和热更新，而 build 用于生产环境构建。

rollup.config.js: 重要配置点，它引入svelte-preprocess-markdown插件，允许处理Markdown文件。


import svelte from 'rollup-plugin-svelte';
import { markdown } from 'svelte-preprocess-markdown';
 
export default {
    input: 'src/main.js',
    output: {...},
    plugins: [
        svelte({
            preprocess: markdown()
        })
    ],
    ...
};