时间戳

首页 > 解决方案 > 更改 Svelte / Sapper 中预处理器的顺序

preprocessor - 更改 Svelte / Sapper 中预处理器的顺序

问题描述

我的工兵应用程序遇到了很大的问题。我正在使用带有svelte-preprocess插件的汇总将我的scss转换为css：

const preprocess = sveltePreprocess({
  scss: {
    data: `@import '${join(process.cwd(), "src/styles/main.scss")}';`,
    includePaths: ["node_modules", "src"],
  },
  postcss: {
    plugins: [...],
  },
});

之后，我想运行另一个预处理器svelte-image来优化我的图像。这里的问题是，根据预处理器的设计，影响标记的那些总是首先运行。这将导致我的图像预处理器失败，因为他会遇到scss文件并且无法通过它们。

对我来说最好的解决方案是编写我自己的预处理器，它会进行样式设置，然后调用图像库。文档中有一些示例，但我并不真正理解它们。如果我尝试这个例子：

const svelte = require('svelte/compiler');

const { code } = await svelte.preprocess(source, [
    {
        markup: () => myPreprocess()
        style: () => imagePreprocess()
    }
], {
    filename: 'App.svelte' // Which file would that be for sapper?
});

我收到一个来源未知的错误。那么任何人都可以指出我正确的方向如何正确和调用那个特定的预处理器吗？或者也许是更好的解决方案;-)

标签： preprocessorsvelterolluprollupjssapper

解决方案

tl;博士

我解释了如何做到这一点，并意识到它会成为一个有用的实用程序。我创建了一个包来处理这个问题：svelte-sequential-preprocessor。

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import seqPreprocessor from 'svelte-sequential-preprocessor'
import autoPreprocess from 'svelte-preprocess'
import image from 'svelte-image'
 
export default {
  ...,
  plugins: [
    svelte({
      preprocess: seqPreprocessor([ autoPreprocess(), image() ])
    })
  ]
}

解释

文档中的预处理使用示例用于将预处理器功能用作独立实用程序。要使用带有汇总的自定义预处理器，您可以执行以下操作：

export default {
  ...,
  plugins: [
    svelte({
      preprocess: {
        markup: ({ content, filename }) => myPreprocess(content)
      }
    })
  ]
}

注意：传递给的内容markup()将是一个完整的 svelte 文件，表示为一个字符串。

但是，即使考虑到这一点，您的提案也不会像您描述的那样奏效。问题是样式预处理器只获取样式作为内容。 svelte-image需要完整的 Svelte 组件markup()。

如果您进行最后一次调整，则可以使其发挥作用。您可以强制每个预处理器在调用下一个阶段之前运行所有阶段，而不是尝试在不同阶段调用预处理器，方法是使用上面引用的库中的 preprocess 函数。可以在此处找到完整的示例，但这里是逻辑的基本概述。

export default {
  ...,
  plugins: [
    svelte({
      preprocess: {
        markup: async ({ content, filename }) => {
          const processed = await svelte.preprocess(content, autoPreprocess({ options }), { filename });
          // Handle return value and repeat for other preprocessors
          return {
            code: ...,
            dependencies: ...
          };
      }
    })
  ]
}

推荐阅读