如何为 Svelte 和 Webpack 设置 pug 预处理器？

Question

在下面的 Vue 案例中，Webpack 设置提供了 Pug 支持：

{
  module: {
    rules: [
      // ...
      {
        test: /\.pug$/u,
        oneOf: [

          // For the single file components
          {
            resourceQuery: /^\?vue/u,
            use: [ "pug-plain-loader" ]
          },

          // For the retrieving of the <template> part from the external file
          {
            use: [
              {
                loader: "html-loader",
                options: {
                  minimize: { caseSensitive: true }
                }
              },
              "pug-html-loader"
            ]
          }
        ]
      }
    ]
  },
}

上述设置是否适用于 Svelte？我想不是，它还需要一些额外的包来提供 mixin，例如 +if()、+each() 等

错误示例：

ERROR in ./OverflowSafeSingleLineLabel.svelte
Module build failed (from ../node_modules/svelte-loader/index.js):
Error: ParseError: Unexpected token (12:29)
10: <script lang="ts">
11: 
12:   export const rootElementTag: string = "div";
                                 ^
13: 
14: </script>

请不要向我推荐Rollup等其他项目构建工具，因为当前的主题是Webpack适配。

Answer 1

首先安装 svelte-preprocess：npm install --save-dev svelte-preprocess。然后调整 webpack 配置并告诉 Svelte 加载器预处理 Svelte 文件：

import preprocess from 'svelte-preprocess'; // <-- this line is added
//...
   test: /\.svelte$/,
   loader: 'svelte-loader',
   options: { preprocess: preprocess() } // <-- this line is added

现在，在您的 Svelte 文件中，您需要像使用 Vue 文件一样使用 lang=".." 来向 svelte-preprocess 发出信号，表明它需要在将内容交给 Svelte 编译器之前对其进行预处理。

<script lang="ts">
   const a: string = 'I can use TS in here';
</script>

<template lang="pug">
  I can use pug in here
</template>

哈巴狗的语法有点不同，这里有解释：https://github.com/sveltejs/svelte-preprocess/blob/HEAD/docs/preprocessing.md#pug

如何为 Svelte 和 Webpack 设置 pug 预处理器？

How to setup the pug pre-precessor for Svelte and Webpack?

webpack

svelte