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

Question

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

Answer 1

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

这是我的 pug mixin，包括一个额外的 show mixin(比如 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)
    }
}