新しい Svelte CLI をご紹介します

Svelte プロジェクトを作成、強化、およびアップグレードするための新しいコマンドラインインターフェース (CLI) である sv をリリースしました。

最も多い質問の 1 つとして「新しいプロジェクトで Tailwind を設定する方法」があります。Tailwind には SvelteKit ドキュメント がありますが、8 つのステップが記載されています。コミュニティ主導の `svelte-add` プロジェクトによってこのプロセスを自動化できますが、このプロジェクトを知っている人はほとんどいませんでした。

この機能を独自の CLI でプロジェクト作成画面内で直接提供しています。Tailwind だけではありません。フォーマット、リンティング、テスト、データベースや認証、i18n などの設定のためのアドオンがあります。`npx sv create` を実行してプロンプトに従ってください。

$ npx sv create

┌  Welcome to the Svelte CLI! (v0.5.8)
│
◇  Where would you like your project to be created?
│  my-new-app
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◆  What would you like to add to your project? (use arrow keys / space bar)
│  ◻ prettier (https://prettier.dokyumento.jp)
│  ◻ eslint
│  ◻ vitest
│  ◻ playwright
│  ◻ tailwindcss
│  ◻ drizzle
│  ◻ lucia
│  ◻ mdsvex
│  ◻ paraglide
│  ◻ storybook
└

また、`npx sv add` を実行して、既存のプロジェクトにアドオンを適用することもできます。近い将来、`sv` 内のコミュニティにより提供されたアドオンもサポートします。このアドオンを開発する場合は、問題 を CLI リポジトリ で購読して、サードパーティのアドオンがサポートされたときに通知を受け取ってください。

それだけに留まりません。Svelte は時間の経過とともに、いくつかの CLI を蓄積してきました。`svelte-check` はコマンドラインからプロジェクトの型チェックを行い、`npx svelte-migrate` は新しいメジャーバージョンへのアップグレードを支援します。また、今後さらに多くの機能が追加される可能性があります。各ツールのパッケージ名を覚えるのは面倒です。そのため、`sv` という 1 つの屋根の下でエクスペリエンスを統合します。つまり、`sv migrate svelte-5` を実行して、Svelte 4 プロジェクトを Svelte 5 にアップグレードできるようになりました。(マイグレーションの機能は VS Code 用の Svelte と プレイヤグラウンド でも見つかります。)

この CLI を可能にした npm 上の sv パッケージ名を寄付してくれたクリストファー・ブラウン (chbrown) に心から感謝します。このパッケージは以前の `create-svelte` とコミュニティ主導の `svelte-add` ツールを 1 つのパッケージにマージします。`svelte-add` プロジェクトのメンテナンスを最近引き継ぎ、このプロジェクトを公式に Svelte の一部にした最新 Svelte メンテナーに加わった、マヌエル (manuel3108) とエイドリアン (CokaKoala) に感謝します。また、`svelte-add` プロジェクトを作成し、長年にわたり Svelte コミュニティの重要な一部としてこれを管理してきた J (babichjacob) にも感謝します。

CLI がどのように機能するかを見るには、ベン・デイビスと t3.gg からのこのデモをご覧ください。

...または `npx sv` を実行して自分で試してみてください。