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

Posted 2023-03-07

【中文标题】更改 Svelte / Sapper 中预处理器的顺序

【英文标题】：Change the order of preprocessors in Svelte / Sapper

【发布时间】：2020-10-08 06:55:20

【问题描述】：

我的 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 文件并且无法传递它们。

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

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?
);

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

【参考方案1】：

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 函数。一个完整的例子可以在here找到，但这里是一个基本的逻辑大纲。

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: ...
          ;
      
    )
  ]

【讨论】：

它有效。你是一个真正的英雄。无论你走到哪里，愿阳光普照。