Question

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

Answer 1

在我们的分叉中，有一些实验性的辅助混合器连接到我们的PUG预处理器中：

https://github.com/alvin/sapper-template-pug#pug-mixins

这些允许在循环和条件中使用PUG本机缩进的语法更加简洁。

Answer 2

有一个Svelte预处理程序包装程序，该程序包装程序经过烘焙以支持常用的预处理程序，包括Pug：https://github.com/kaisermann/svelte-preprocess

这是我的哈巴狗混合，包括奖金show混合（例如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)
    }
}

Answer 3

我之前没有使用过哈巴狗，但只要你不想将哈巴狗模板翻译成一个苗条的组件（其中f.i.pug迭代将变成苗条的迭代），我认为。

因此，如果你可以让你的哈巴狗模板成为一个有效的苗条组件，你应该能够好好去。因此包括带有逻辑的脚本标记，并在输出的html中包含{#if|each|await}块和{interpolation}块。

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

3 个答案: