Sveletkitであなたの最初のsvelteアプリを作成する

SvelteはWebアプリケーションを構築するための軽量フレームワークです.あなたがそれを使用すると、それは見て、反応とVueのような他のフロントエンドのフレームワークのように多くの感じが、仮想DOMの背後に残します.それは、他の最適化とともに、ブラウザの中ではるかに少ない仕事をして、ユーザーエクスペリエンスとロード時間を最適化することを意味します.
このガイドでは、どのようにセットアップをSveletKitを使用して最初のsvelteアプリケーションを設定するつもりです.Svelteは、アプリケーションを作るためのさまざまな方法の数を持っており、SveletKitはそれを行うためのsvelteからの公式パッケージの一つです.あなたが他のフレームワークに興味があるならば、あなたは我々がmaking your first Vue applicationに持っている同様のガイドを楽しむかもしれません.

あなたの最初のSvelteアプリケーションを作成する
開始するには、新しいターミナルウィンドウを開き、次のコマンドを使用してSvelteアプリケーションを起動します.あなたがnpmをインストールしないならば、あなたはそれを得る必要があります.ノードをインストールすることにより、npmをインストールできます.J .
一度ノードを持っています.JSとNPMがインストールされ、以下のコマンドを実行します.あなたがそれをする前に、あなたがあなたの新しいsvelteアプリケーションを作成したいフォルダに移動するためにcdを使用していることを確認してください.

npm init svelte@next my-svelte-app

このコマンドを実行すると、私のsvelteアプリと呼ばれるフォルダーでsvelteテンプレートを自動生成します.Svelteはオプションの数をご案内します.あなたの好みを選択します.下の画像は私が選んだものを示しています.このガイドの目的のために、私はスケルトンプロジェクトを使用します.
via the link here
最後に、SLALTディレクトリに以下のコマンドをCDに実行します.

cd my-svelte-app

それから、依存関係の全てを以下の行を使ってインストールします.

npm i

Svelteファイル構造
あなたが他のフレームワークに精通しているならば、Svelteはよく知られていると感じます.Svelteのファイル構造の概要を示します.

static                 <-- where we store all of our public assets like favicons, images, and fonts
|- favicon.png         <-- our favicon
tests                  <-- a folder to store our tests
|- test.js             <-- an example test using @playwright
src                    <-- our main Svelte app files
|- routes              <-- a folder to store all of our routes in
|-- index.svelte       <-- our index route file. This will be the file displayed at the route of the site
|- app.d.ts            <-- our core Svelte app file
|- app.html            <-- our main index file where the app will appear
.gitignore             <-- files we wish to ignore for git
.npmrc                 <-- config file for npm
.prettierrc            <-- config file for prettier
.eslintrc.cjs          <-- config file for eslint
package.json           <-- our NPM installed packages
playwright.config.js   <-- config file for playwright
svelte.config.js       <-- config file for svelte itself
tsconfig.json          <-- config file for typescript

当社の基本的なsvelteアプリケーションを移動する準備が整いました.あなたがそれがどのように見えるかについて見たいならば、あなたのSvelteアプリケーションフォルダで以下のコマンドを実行することによって、あなたはURL の上でローカルコンピュータでそれを提供することができます:

npm run dev

ブラウザでhttp://localhost:3000を訪れたら、次のようにしてください.
http://localhost:3000

Svelteで新しいページまたはルートを作成する
SvelteKitで新しいルートを作成するには、単にルートフォルダ内の新しいファイルを作成します.例えば、あなたがファイルを呼ばれるならば.スヴェート、それは で現れます.もう一つの方法は、新しいフォルダを作成し、インデックスを作成することです.そのフォルダのSvelte、http://localhost:3000/aboutが動作します.
http://localhost:3000/about
自分で試してみて
src/routeフォルダ内に新しいページを作成します.スベルト.あなたが に行くとき、あなたはそのページにアクセスすることができます.同様に、インデックスと呼ばれるファイルを使ってフォルダを作成しようとすることもできます.スベルト
http://localhost:3000/
どのようにノード上でSveletKitアプリを実行します.js
サーバー上のSvelteアプリケーションをローカルまたはノード上で実行するには.JSサーバー、アダプタを使用する必要があります.ノードサーバー上でsvelteアプリケーションを実行する場合は、@ sveletjs/アダプターをインストールします.node@next次の行を介して

npm i @sveltejs/adapter-node@next 

今、我々はsvelte.config.jsファイルを変更する必要があります.新しいアダプタを使用し、設定ファイル内のkit.adapterオブジェクトを変更する必要があります.あなたはsvelte.config.jsの内容を以下のコードで置き換えることができますが、私たちは2行を変更するだけです-アダプタのインポート、そしてあなたの設定でビルドディレクトリを追加します.

// We have changed the adapter line to use adapter-node@next
import adapter from '@sveltejs/adapter-node@next';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess(),

    kit: {
        // We have changed this to point to a build directory
        adapter: adapter({ out: 'build' })
    }
};

export default config;

他のSveltekitアダプター
あなたがCloudFlare、NetLifyまたはVercelにあなたのsvelteアプリケーションを走らせたいならば、あなたはこれらのアダプターの1つを使用する必要があります、あなたは何もする必要はありません.これらはすべてアダプターオートのデフォルトで含まれています-ので、あなたのsvelteを変更します.設定.あなたがノードを使用することを計画していないならば、JSファイル.jsサーバー.

生産のためにあなたのSveletKitアプリを構築する方法
アダプターを設定しましたので、アプリケーションを構築しましょう.SveletKitでは、それはあなたのアプリは、生産環境で実行する準備ができて簡単です.単に以下のコマンドを実行します.すべてのあなたの製造準備ができているファイルでsvelteキット.

npm run build

さて、ビルドをプレビューしたい場合は、以下のコマンドを実行してください.

npm run preview

アプリケーションをノードで実行している場合.JSサーバーは、以前のセクションに示すようにアダプタを更新しました.その後、svelteディレクトリに次のコマンドを実行して、新しいsvelteアプリケーションをローカルで実行できます.

node build/index.js

あなたが に移動すると、あなたのsvelteアプリケーションが表示する必要があります、この時間だけ生産の準備ができます.
http://localhost:3000/
結論
このガイドではどのようにルートを使用して最初のsvelteアプリケーションを作成するSveletKitを使用する方法を見てきました.私たちが学んだことを見てみましょう.

SveletKitを設定し、Svelteアプリケーションの基本構造を作成する方法.

SveletKitでルートを使用する方法は、アプリケーションに複数のページを持つことができます.

アプリケーションを配備する場所に基づいて、右側のアダプターを使用するように設定ファイルを更新する方法.

ローカルでアプリケーションをビルドして実行する方法.jsサーバー.

次に、あなたのアプリケーションをカスタマイズを開始するにはSvelteで遊んでみてください.より多くのウェブコンテンツについては、忘れないでください.