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

Question

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

Answer 1

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

这是我的哈巴狗 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)
    }
}

Answer 2

在我们的 fork 中，有一些实验性的 helper mixin 连接到 PUG 预处理器中：

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

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

Answer 3

我以前没有使用过 pug，但我认为只要您不想将 pug 模板转换为 svelte 组件（其中 fi pug 迭代将变成 svelte 迭代）。

因此，如果您可以使您的 pug 模板成为有效的 svelte 组件，那么您应该能够顺利进行。所以包括带有逻辑的脚本标签，并且在输出的html中有{#if|each|await}块和{interpolation}块。