Sveletkitパート1の最初の観察

19656 ワード
vite sveltekit svelte sapper テキストリンク
月に戻って、私はサパーとのプロジェクトでした.リッチ・ハリスが最近発表したようにSvelte Summit , サパー1.0がリリースされます.決して.
その代わりに、Svelette Coreチームは、Sveltekitとして知られているプロジェクトにその努力を移していますWhat's the deal with SvelteKit? . Svelte、Sapper、Sveletkitを建てる人々が基本的に同じ人であることをここで強調することが重要です.本当にここで劇的な何も変更されていない、それはrebrandと名前空間の移行の詳細です.それともそれとも?
また、Svelteは現在、Aと呼ばれているServerlessな技術により大きな焦点になるでしょう"serverless-first" フレームワーク.しかし、私にとって最も重要な変化は、発展依存としてのロールラーの除去とその置き換えですSnowpack Vite .
SvelteKitは非常に新しいので、それは現在、この記事の冒頭にリンクされたブログのポストの形で、ほとんどが現在存在しますa monorepo inside the SvelteJS GitHub organization とwebsite . しかし、あなたはそれをダウンロードすることができますし、それを使用して起動すると、多くの、多くの警告をそれに付属しています.

デモアプリを初期化


mkdir ajcwebdev-sveltekit
cd ajcwebdev-sveltekit
npm init [email protected]
プロジェクトを初期化した後、免責事項を与えられます.

Welcome to SvelteKit!

This is beta software; expect bugs and missing features. If you encounter a problem, open an issue on https://github.com/sveltejs/kit/issues if none exists already.

Stuck? Visit us at https://svelte.dev/chat


次に、一連の質問をあなたのアプリケーションを設定するよう求められます.お気軽にあなた自身の個人的なユースケースに基づいて答えてください.
✔ Which Svelte app template? › SvelteKit demo app
✔ Use TypeScript? … No
✔ Add ESLint for code linting? … No
✔ Add Prettier for code formatting? … No

Want to add other parts to your code base? Visit https://github.com/svelte-add/svelte-adders, a community project of commands to add particular functionality to Svelte projects


このブログシリーズの単純さのために、私はTypesScript、Eslint、およびParttyのためにNOと答えました、そして、私はどんな追加CSSライブラリも含みません.

依存関係のインストールと開発サーバの起動


npm i
npm run dev -- --open
オープンlocalhost:3000 プロジェクトを見てください.

あなたがクリックするならば、何かが起こるかもしれません+ or - ボタン周辺0 , 誰もできないかもしれないが、おそらく知っていることができます.
端末を見ると以下のメッセージが表示されます.
[vite] page reload .svelte/dev/generated/root.svelte
私は、ここで冗談が現在非難されないので、ここで雪パック冗談を持っていました.

プロジェクト構造


それではコードを見てみましょう.
├── src
│   ├── lib
│   │   ├── header
│   │   │   ├── Header.svelte
│   │   │   └── svelte-logo.svg
│   │   ├── Counter.svelte
│   │   └── form.js
│   ├── routes
│   │   ├── todos
│   │   │   ├── _api.js
│   │   │   ├── [uid].json.js
│   │   │   ├── index.json.js
│   │   │   └── index.svelte
│   │   ├── __layout.svelte
│   │   ├── about.svelte
│   │   └── index.svelte
│   ├── app.css
│   ├── app.html
│   ├── global.d.ts
│   └── hooks.js
├── static
│   ├── favicon.png
│   ├── robots.txt
│   ├── svelte-welcome.png
│   └── svelte-welcome.webp
├── .gitignore
├── .npmrc
├── jsconfig.json
├── package-lock.json
├── package.json
├── README.md
└── svelte.config.js

エントリポイント


<!-- src/app.html -->

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />

    <link
      rel="icon"
      href="/favicon.png"
    />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />

    %svelte.head%
  </head>

  <body>
    <div id="svelte">
      %svelte.body%
    </div>
  </body>
</html>

エントリポイント


エー.svelte ファイルには3つの部分があります.
  • <script> JavaScriptの場合
  • <style> CSS用
  • HTMLを含む任意のマークアップ.
    • <!-- src/routes/index.svelte -->

<script>
  import Counter from '$components/Counter.svelte';
</script>

    <!-- src/routes/index.svelte -->

<svelte:head>
  <title>Home</title>
</svelte:head>

<section>
  <h1>
    <div class="welcome">
      <picture>
        <source
          srcset="svelte-welcome.webp"
          type="image/webp"
        />
        <img
          src="svelte-welcome.png"
          alt="Welcome"
        />
      </picture>
    </div>

    to your new<br />SvelteKit app
  </h1>

  <h2>
    try editing <strong>src/routes/index.svelte</strong>
  </h2>

  <Counter />
</section>

    <!-- src/routes/index.svelte -->

<style>
  section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
  }

  h1 {
    width: 100%;
  }

  .welcome {
    position: relative;
    width: 100%;
    height: 0;
    padding: 0 0 calc(100% * 495 / 2048) 0;
  }

  .welcome img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: block;
  }
</style>

    カウンターコンポーネント


    反応とは異なり、Svelteは仮想DOMを持っていません.代わりに、Svelteはあなたのアプリケーションの状態と同期してDOMを維持するための反応性の独自のシステムが含まれています.これは、マウスクリックなどのイベントに対応しています.まず変数を初期化しますcount を0 .
    <!-- src/lib/Counter.svelte -->

<script>
  import { spring } from 'svelte/motion';

  let count = 0;

  const displayed_count = spring();
  $: displayed_count.set(count);
  $: offset = modulo($displayed_count, 1);

  function modulo(n, m) {
    return ((n % m) + m) % m;
  }
</script>
    我々は、要素との任意のイベントを聞くことができますon: ディレクティブ.
    <!-- src/lib/Counter.svelte -->

<div class="counter">
  <button
    on:click={() => (count -= 1)}
    aria-label="Decrease the counter by one"
  >
    <svg aria-hidden="true" viewBox="0 0 1 1">
      <path d="M0,0.5 L1,0.5" />
    </svg>
  </button>

  <div class="counter-viewport">
    <div
      class="counter-digits"
      style="transform: translate(0, {100 * offset}%)"
    >
      <strong style="top: -100%" aria-hidden="true">
        {Math.floor($displayed_count + 1)}
      </strong>

      <strong>
        {Math.floor($displayed_count)}
      </strong>
    </div>
  </div>

  <button
    on:click={() => (count += 1)}
    aria-label="Increase the counter by one"
  >
    <svg aria-hidden="true" viewBox="0 0 1 1">
      <path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
    </svg>
  </button>
</div>
    すべてが動いていることをテストするためにindex.svelte .
    <!-- src/routes/index.svelte -->

<script>
  import Counter from '$components/Counter.svelte';
</script>

<section>
  <h1>ajcwebdev</h1>

  <Counter/>
  <p>
    <a href="https://github.com/ajcwebdev">GitHub</a>
  </p>
  <p>
    <a href="https://twitter.com/ajcwebdev">Twitter</a>
  </p>
  <p>
    <a href="https://dev.to/ajcwebdev">Dev.to</a>
  </p>
</section>

    設定


    SveletKitは、実際に興味深いの構成を含むまれなフレームワークです.あなたはSveltekitは雪パックを使用していた過去に聞いたことがあります.Sveltekitは雪パックと並行して開発されたが、2021年2月にベータ版の発射の1ヶ月前にViteに移行した.
    あなたはスイッチのリッチハリスの推論を読むことができますhere :

    While we had misgivings about Vite 1 (which gave Vue apps preferential treatment, and didn't really support SSR), Vite 2 does a really great job of solving some tricky problems that were previously in SvelteKit's domain, like CSS code-splitting or fixing stack traces during SSR. Since it's Rollup-based, it also means that SvelteKit apps can benefit from the very large ecosystem of Rollup plugins.


    スベルト。設定。js

    target 水和する<div id="svelte"> エレメントインsrc/app.html .
    // svelte.config.js

/** @type {import('@sveltejs/kit').Config} */

const config = {
  kit: {
    target: '#svelte'
  }
};

export default config;

    展開用の公式アダプタ


    Svelteアプリはadapters プロジェクトを最適化するには、異なる環境で展開します.

  • adapter-begin — for Begin

  • adapter-cloudflare-workers — for Cloudflare Workers

  • adapter-netlify — for Netlify

  • adapter-vercel — for Vercel
    • また、ノードサーバー上のアプリケーションを実行するためのアダプタまたは静的ホスティングプロバイダに配備されます.

  • adapter-node — 自己完結型ノードアプリケーションの作成

  • adapter-static — 静的ファイルのコレクションとしてサイト全体をprerendering
    • デフォルトではnpm run build を実行することができますノードアプリケーションを生成しますnode build . 別のアダプタを使用するにはsvelte.config.js したがって.
    CORS問題の解決
    シングルページアプリケーションを配備する