サパーは死んでいる!Svelteの次は何ですか?

あなたがそれを逃した場合には、リッチハリスはSapteサミット2020でプレゼンテーションをしました、そこで、彼はサッパーV 1が決してリリースされないと発表しました!その代わりに、彼はSvelte自体で次に何が来るかを示しました.
私がこのブログ記事を書いている時に、このどれも公式にリリースされていないことに気づいてください.それにもかかわらず、Svelteの将来がどのように見えるかについてのスニークプレビューを見ることは刺激的です.

始める
今日から始めるには、このコマンドを端末で実行することができますnpm インストールnpm init svelte@next将来的には、おそらくそれはちょうどでしょうnpm init svelte , スーパークリーンで覚えやすい.これは、実行することから良い変更されますnpx degit svelte/template my-template .
あなたが今日このコマンドを実行するならば、あなたが見るものはここにあります:

█████████  ███████████    ███████    ███████████  ███
███░░░░░███░█░░░███░░░█  ███░░░░░███ ░░███░░░░░███░███
░███    ░░░ ░   ░███  ░  ███     ░░███ ░███    ░███░███
░░█████████     ░███    ░███      ░███ ░██████████ ░███
░░░░░░░░███    ░███    ░███      ░███ ░███░░░░░░  ░███
███    ░███    ░███    ░░███     ███  ░███        ░░░
░░█████████     █████    ░░░███████░   █████        ███
░░░░░░░░░     ░░░░░       ░░░░░░░    ░░░░░        ░░░

Pump the brakes! A little disclaimer...

svelte@next is not ready for use yet. It definitely can't
run your apps, and it might not run at all.

We haven't yet started accepting community contributions,
and we don't need people to start raising issues yet.

Given these warnings, please feel free to experiment, but
you're on your own for now. We'll have something to show
soon.

あなたがTypesScriptを使用するのが好きである人々のために本当に親切なtypescriptを使いたいならば、それはあなたに尋ねに行きます、そして、それがそうでない人々のためにオプションであることはうれしいです.
最初のインストールで取得する完全なディレクトリ構造です.

├── .gitignore
├── package.json
├── README.md
├── snowpack.config.js
├── src
│   ├── app.html
│   ├── components
│   │   └── Counter.svelte
│   └── routes
│       └── index.svelte
├── static
│   ├── favicon.ico
│   └── robots.txt
└── svelte.config.js

devサーバの起動
ファイルを設定すると、実行する必要がありますnpm install それからnpm run dev devサーバをスピンします.あなたが見るものは、ここにあります:

snowpack

  http://localhost:3001 • http://10.0.0.180:3001
  Server started in 643ms.

▼ Console

[snowpack] installing dependencies...
[snowpack] ✔ install complete! [0.59s]
[snowpack] 
  ⦿ web_modules/                                size       gzip       brotli   
    ├─ svelte-hmr/runtime/hot-api-esm.js        22.08 KB   7.4 KB     6.29 KB    
    ├─ svelte-hmr/runtime/proxy-adapter-dom.js  5.17 KB    1.65 KB    1.38 KB    
    ├─ svelte.js                                0.18 KB    0.15 KB    0.11 KB    
    ├─ svelte/internal.js                       52.36 KB   13.16 KB   11.36 KB   
    └─ svelte/store.js                          3.3 KB     1 KB       0.88 KB    


[snowpack] > Listening on http://localhost:3000

何がフードの下で起こっている?これは、前に来たsvelteとsapperテンプレートと非常に異なります.もはやないrollup.config.js もwebpack.config.js , ログープやwebpackを使わないので、少なくとも開発中はありません.
代わりにSnowpack クライアント側のリソースをコンパイルおよび提供するために.Snowpackは、あなたのリソースをバンドルしていませんし、開発ははるかに速くなっているJavaScriptのネイティブモジュールシステムに大きく依存します.Aもありますsnowpack.config.js いくつかの程度に雪パックを設定する場所を与えるファイル

// Consult https://www.snowpack.dev to learn about these options
module.exports = {
    extends: '@sveltejs/snowpack-config'
};

アプリケーションの構築
今も新しいsvelte.config.js ファイルを使用すると、npm run build アプリケーションを生産Webサイトに構築するには、次の手順に従います

module.exports = {
    // By default, `npm run build` will create a standard Node app.
    // You can create optimized builds for different platforms by
    // specifying a different adapter
    adapter: '@sveltejs/adapter-node'
};

デフォルトのアダプターは、あなたのサイトをノードに構築するためにrollupを使用します.ウェブサーバ.このWebサーバはExpressを使用しないようです.JSは、それも同様に変更される可能性がありますが、または多分Express用の特別なアダプタがあるでしょう.
あなたが純粋に静的な輸出をしたいならば、あなたは現在交換することができます@sveltejs/adapter-node with @sveltejs/adapter-static , しかし、必ず実行するnpm install @sveltejs/adapter-static 同様に.
将来的には、特定のWebホスティングプラットフォーム、Serverlessアーキテクチャのための具体的に構築する他の多くのアダプタがあり、誰が何を知っている?このアダプターアプローチについてのクールなことは、ビルドまたは展開する方法を必ずしも知ることなく、Webサイトを構築することができます.あなたのコードを変更せずにアダプタを変更することができます.

依存
見てみましょうpackage.json :

{
    "name": "demo",
    "version": "0.0.1",
    "scripts": {
        "dev": "svelte dev",
        "build": "svelte build"
    },
    "devDependencies": {
        "@sveltejs/adapter-node": "0.0.12",
        "@sveltejs/kit": "0.0.23",
        "@sveltejs/snowpack-config": "0.0.4",
        "svelte": "^3.29.0"
    }
}

ここでは依存関係はほとんどありません.閉じるこの動画はお気に入りから削除されています.両方のスクリプトは、新しいsvelte CLIから@sveltejs/kit , その名前は変わるかもしれません、そして、それはまだGithubで利用できません.今のところ、あなたはnpm package .

路線
フォルダに気づくでしょうsrc/routes/ ここで、あなたのルートを定義することができますどのようにsapper(またはnext . jsなど)は、ルートを定義できます.基本的に、あなたのフォルダとファイル構造は、あなたのウェブサイトのルートで1対1でマップします.PHPやその他の類似のWeb開発プラットフォームを使用している場合は特に、これは本当に素晴らしく、使いやすいです.
静的のみのWebサイトを構築していない場合は、サーバー側のルートを定義することもできます.例えば、src/routes/api.js :

export async function get(req) {
    return {
        status: 200,
        body: {
            hello: 'world'
        }
    }
}

もしSAPPERに精通しているなら、オブジェクトを返す必要があることに気づくかもしれませんstatus and body 明示的に使用する代わりにプロパティres を返します.これはエクスプレスミドルウェアではないからです.これは、内部ノードのWebサーバーを使用して、いくつかのサーバーなしのクラウド機能を使用している可能性がありますAPIに似ています.
レイアウトコンポーネントを作成するには、一貫したヘッダーとフッターをすべてのルートにラップするには、$layout.svelte , sapperのと似ている_layout.svelte .
エラーハンドラのルートを$error.svelte , 404 sおよび他のプログラミングエラーを処理する.受信するstatus 支柱ともerror propので、ユーザーにエラーを表示する方法を決定することができます.

移行
多くのフォルダ構造と他の概念がかなり類似しているので、サパーまたは他の類似したフレームワークから移行することはかなり簡単でなければなりません.あなたはおそらく、いくつかのファイルの名前を変更する必要がありますし、サーバー側のルートの動作方法を変更します.
サーバサイドとクライアントサイドレンダリングの両方のデータを取得するには、<script context="module"> ブロックはまだ動作しますが、変更可能です.

結論
あなたがこのすべてのものについて興奮しているならば、それを使用しているあなたのアプリケーションを構築することは確実にあまりに早いです、しかし、私は、それがすぐに準備ができたならば、それが将来これに移行するのに十分簡単であるという予想で、今日、サパーを使用することによって始められるのが良い選択であることを賭けて喜んでいます.
デモを見るには、リッチハリス'ビデオをチェックアウト:
あなたがSvelteの詳細について学ぶことに興味があるならば、私のビデオコースをチェックしてくださいThe Joy of Svelte .