Изменить порядок препроцессоров в Svelte / Sapper - PullRequest
Новая
       144

Изменить порядок препроцессоров в Svelte / Sapper

1 голос
/ 18 июня 2020

У меня довольно большая проблема в моем приложении sapper . Я использую свертку с плагином svelte-preprocess , чтобы преобразовать мои s css в css: 

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

После что я хочу запустить другой препроцессор, svelte-image , чтобы оптимизировать мои изображения. Проблема здесь в том, что согласно проекту препроцессоров, те, которые влияют на разметку, всегда будут запускаться первыми. Это приведет к сбою моего препроцессора изображения, поскольку он столкнется с файлами s css и не сможет их передать.

Лучшим решением для меня было бы написать мои собственный препроцессор, который стилизует, а затем вызывает библиотеку изображений. В 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?
});

, я получаю сообщение об ошибке, источник неизвестен. Так может ли кто-нибудь указать мне в правильном направлении, как правильно и вызвать этот специфический препроцессор c? Или, может быть, к лучшему решению; -)

1 Ответ

1 голос
/ 21 июня 2020

tl; dr

Я частично объяснил, как это сделать, и понял, что это будет полезная утилита. Я создал пакет для этого: svelte-sequence-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() ])
    })
  ]
}

Explaination

Пример использования препроцессора в документации предназначен для использования препроцессора функционировать как отдельная утилита. Чтобы использовать собственный препроцессор со сверткой, вы должны сделать что-то вроде этого: 

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

Примечание: Содержимое, переданное в markup(), будет полным стройным файлом, представленным как string.

Однако, даже если принять это во внимание, ваше предложение не будет работать так, как вы его описали. Проблема в том, что препроцессоры стилей получают стили только как контент. svelte-image нужен полный компонент Svelte, который и получает markup().

Если вы сделаете одну последнюю настройку, вы сможете заставить его работать. Вместо того, чтобы пытаться вызывать препроцессоры на разных этапах, вы можете заставить каждый препроцессор пройти все этапы перед вызовом следующего, используя функцию предварительной обработки из библиотеки, на которую вы ссылались выше. Полный пример можно найти здесь , но вот базовая c схема logi c. 

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