Integrations

Preprocessorspermalink

プリプロセッサ(Preprocessors)は、.svelte ファイルをコンパイラに渡す前に変換します。例えば、.svelte ファイルに TypeScript と PostCSS が使用されている場合、それを最初に JavaScript と CSS に変換し、Svelte コンパイラが処理できるようにしなければなりません。多数の プリプロセッサが使用可能 です。The Svelte team maintains two official ones discussed below.

vitePreprocesspermalink

vite-plugin-svelte には vitePreprocess という機能があり、Vite をプリプロセスに用いることができます。これによって Vite が扱える言語フレーバー (TypeScript、PostCSS、SCSS、Less、Stylus、SugarSS) の処理が可能になります。便宜上、これは @sveltejs/kit/vite パッケージから再エクスポートされています。プロジェクトに TypeScript を設定すると、これがデフォルトで含まれるようになります:

ts
// svelte.config.js
import { vitePreprocess } from '@sveltejs/kit/vite';
 
export default {
  preprocess: [vitePreprocess()]
};

svelte-preprocesspermalink

svelte-preprocess は、Pug、Babel、global styles のサポートなど、vitePreprocess には無い機能があります。しかし、vitePreprocess はより速く、設定が少ないため、デフォルトでは vitePreprocess が使用されます。SvelteKit は CoffeeScript を サポートしていない ことにご注意ください。

svelte-preprocess をインストールするには npm install --save-dev svelte-preprocess を実行し、ご自身で svelte.config.js に追加する 必要があります。その後、npm install -D sass や npm install -D less など、対応するライブラリのインストール が必要になることが多いようです。

Adderspermalink

Svelte Adders は、Tailwind、PostCSS、Storybook、Firebase、GraphQL、mdsvexなど、様々な複雑なインテグレーションを1つのコマンドでセットアップできるようにしてくれます。Svelte と SvelteKitで利用可能なテンプレート、コンポーネント、ツールの全ての一覧については、 sveltesociety.dev をご覧ください。

Integration FAQspermalink

SvelteKit FAQ に インテグレーションのセクション があるので、もしまだ不明点があるようでしたら役に立つかもしれません。