有没有办法在 svelte 组件中使用 pugjs？

Question

我正在尝试重写我用 pugjs 制作的应用程序并在 sveltejs 中表达。我真的很喜欢用 pugjs 写 html。我想知道我是否可以在 svelte 组件中使用 pugjs。我假设我可能需要使用svelte-loader并进行一些预处理，或者甚至可能吗？我正在使用Sapper以苗条的方式重写我的应用程序。谁能帮助我如何在 Sapper 中做到这一点？

Answer 1

有一个 Svelte 预处理器包装器，支持常用的预处理器，包括 Pug：https :  //github.com/kaisermann/svelte-preprocess

这是我的 pug mixin，包括一个额外的showmixin（比如 Vue 的v-show）。在底部，您可以看到如何将它们与 svelte-preprocess 集成。

const pugMixins = `

mixin if(condition)
    | {#if !{condition}}
    block
    | {/if}

mixin else
    | {:else}
    block

mixin elseif(condition)
    | {:elseif !{condition}}
    block

mixin each(loop)
    | {#each !{loop}}
    block
    | {/each}

mixin await(promise)
    | {#await !{promise}}
    block
    | {/await}

mixin then(answer)
    | {:then !{answer}}
    block

mixin catch(error)
    | {:catch !{error}}
    block

mixin debug(variables)
    | {@debug !{variables}}

mixin show(condition)
    div(style!="display: {" + condition + " ? 'initial' : 'none'}")
        block

`

export default {
    /** Transform the whole markup before preprocessing */
    onBefore({ content, filename }) {
        return content.replace('<template lang="pug">', '<template lang="pug">' + pugMixins)
    }
}