RazorSvelte
1.0.0
注記：
他にもいくつかのUIコンポーネントフレームワークが評価されており、最後にこのテンプレートはブートストラップで解決されます。
たとえば、カーボンや材料UIなど、他のテンプレートを使用するには、このファイルの以下のインストール手順を参照してください。
これはプロジェクトテンプレートであるため、改善により常に更新されており、新しいコンポーネントにはより近代的で多目的なWebアプリケーションが必要です。
次のセットアップでテンプレートプロジェクトを含むプロジェクトテンプレートリポジトリ：
chart - chart.jsのラッパー。chart-box - タイトルとフルスクリーンのズームボタンを備えたチャート。data-grid - ブートストラップテーブルを使用するリモートデータソースを備えたデータグリッド。modal - ブートストラップモーダルのラッパー。multiselect検索と仮想スクロールを使用して複数のドロップダウン選択。offcanvasブートストラップOffcanvasのラッパー。pager - データグリッドで動作するブートストラップページャー。placeholder - ブートストラッププレースホルダーに基づいてプレースホルダーをロードします。これは、主に他のコンポーネントが初心者のない状態を管理するために使用しています。search-input - 検索タイムアウトを処理し、複数の検索リクエストを防ぐ検索アイコンを使用したシンプルな検索入力。これらのコンポーネントの使用例を確認するには、このプロジェクトを参照してください。
これらの手順に従って、Razorsvelteデモアプリケーションを構築して実行します。
https://raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfileからdockerfileをダウンロードする（またはwget https：// raw.githubusercontent.com/vb-consulting/razorsvelte/master/dockerfile `from command prompt）
コマンドプロンプトを開き、dockerfileを保存したフォルダーに移動します
次のコマンドを実行します。
docker build -t razorsvelte . docker run --rm -it -p 5000:80 --name razorsvelte razorsvelte:latest
注記：
外部プロバイダーでログインしようとすると、エラーページにリダイレクトされます。独自のクライアントプロバイダーIDとクライアントの秘密で
appsettings.json編集し、OAuthアプリケーションが「localhost：5000``」にリダイレクトすることを確認してください。
/ ：インデックスページ - 外部の小道具から値を表示し、 world from svelte HelloWorldを表示し、便利なリンクを表示します/privacy - プライバシーサンプルページは、RazorページViewdataから渡されたSvelteページのH1タイトルを表示します。/login - 外部ログインボタンを表示します/authorized Authorize属性で保護されたサンプル認定ページ。 Razorページから渡された簡単な認定ユーザーデータを表示します。/401許可されていないユーザーがAuthorize属性を使用してページにアクセスしようとしたときにリダイレクトする不正なページをサンプリングします。/404未知のサーバールートのページが見つかりません。/spa SPAファッションでさまざまなルートを表示するハッシュタグクライアントルーターコンポーネントを使用したシングルページアプリケーション（SPA）の例。重要なメモ：
wwwrootに出力するように構成されており、通常はRazorページ（または他のページ）にインポートできます。Svelteは、ユーザーインターフェイスを構築するための根本的な新しいアプローチです。
ReactやVueのような従来のフレームワークは、ブラウザで作業の大部分を実行しますが、アプリを構築するときに発生するコンパイルステップに動作するSVELTEシフト。仮想DOM Diffingなどの手法を使用する代わりに、Svelteは、アプリの状態が変更されたときにDOMを外科的に更新するコードを書き込みます。
Svelteは、小さくて非常に最適化されたJavaScript出力を生成するコンパイラです。
Svelteはマークアップをコンパイラ出力にバンドルします。これは、通常のマークアップよりもさらに小さいです。
Svelteコンパイラ出力はブラウザでキャッシュされ、ブラウザがそのマークアップを再度ダウンロードする必要さえないため、後続のすべての要求をさらに速くします。
Svelteは純粋なバニラJavaScriptを生成するため、ランタイムオーバーヘッドはありません。これはまた、おそらくあなたが持っている可能性のある古いUIコンポーネントを再利用するために、必要になるかもしれない実行時間フレームワーク（ロールアップを使用して）インポートおよびバンドルできることを意味します。たとえば、jQueryのレガシーコード。
Stackoverflowの調査によると、Svelteは2021年に開発者にとって最も愛されているWebフレームワークになりました。
RollUpは、ASP.NETプロジェクトで実行され、コンパイル、バンドル、および削除されていないモジュールを削除し、ASP.NETプロジェクトのwwwrootに出力するために事前に構成されています。
また、通常のように通常のASP.NET Razorページ（またはMVC）を使用し続けることもできます。
結果は非常に**最適化されたWeb ****アプリケーション***であり、
また、サーバー側のレンダリングと最適化されたフロントエンドレンダリングを組み合わせることができます。
何よりも - このテンプレートを使用して、退屈な構成を避けることができます。
$ npx degit vb-consulting/RazorSvelte
> cloned vb-consulting/RazorSvelte#HEAD
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#carbon
> cloned vb-consulting/RazorSvelte#carbon
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#svelte-material-ui
> cloned vb-consulting/RazorSvelte#svelte-material-ui
$ cd RazorSvelte
$ npm install
...
$ dotnet run
$ npx degit vb-consulting/RazorSvelte#net5
> cloned vb-consulting/RazorSvelte#net5
$ cd RazorSvelte
$ npm install
...
$ dotnet run
jQueryの例には、jqueryを使用してSvelteとlollupでバンドルする方法を示すページが1つしかありません。
$ npx degit vb-consulting/RazorSvelte#jquery
> cloned vb-consulting/RazorSvelte#jquery
$ cd RazorSvelte
$ npm install
...
$ dotnet run
注記：
degit 、単にリポジトリの初期化なしでGit Repoのコンテンツの最新バージョンをダウンロードして解凍するだけです（たとえば、 git cloneとは異なります）。このテンプレートを使用して、ビッググリーンボタンをクリックしてください。
メインテンプレート（JQueryやNet5の例など）ではなく、他のテンプレートが必要な場合 - 最初にブランチを変更します。
各Razorページには2つの新しいネストされたファイルがあります。
MyPage.rollup.config.jsこのページのロールアップ構成ファイル。MyPage.entry.tsこのページのエントリポイントタイプスクリプトモジュールファイル。注記：
MyPage.cshtml （プロジェクトファイル設定を介して）に依存しているため、VisualStudioやJetBrains RiderのようなIDEが視覚的にネストされます。*.cshtmlのアイテム名と${basename}.cshtml.cs, ${basename}.entry.ts, ${basename}.rollup.config.jsの値を持つアイテムを追加します。構成ファイルはScripts/rollup. config`と次の値を設定します。
wwwroot /build plus entry module name with the js`拡張機能を備えています）。wwwroot /build plus entry module name withです。このレポのサンプルページを参照してください。
Entry TypeScriptモジュールは、このページのSvelteファイルをインポートし、Svelteアプリを返します。
このテンプレートでは、すべての例がdocument.bodyアプリターゲットとして使用しています。つまり、デフォルトのレイアウトPages/Shared/_Layout.cshtmlにはボディのみが含まれています。
ボディの含有量は、Razorページ自体とsvelteコンポーネントによってレンダリングされます。
各Svelte対応のRazorページには、たとえばインデックスページなど、出力JavaScriptとCSS（存在する場合）も含める必要があります。
@section HeadSection {
< link href = " ~/build/index.css " asp-append-version = " true " rel = " stylesheet " />
< script defer src = " ~/build/index.js " asp-append-version = " true " ></ script >
}すべてのSVELTEコンポーネントと追加のモジュールは、個別のApp DIRにあります。
ルート内の各svelteファイルコンポーネントは、上記のように関連するレイザーページで使用されます。それらのそれぞれは、この例ではヘッダー、メインセクション、フッターをレンダリングします。
つまり、マークアップの大部分は、平均サイズが約18kbの1つのページに対して、単一のJavaScriptファイルでSvelteコンパイラによって生成されます。
レンダリングはインスタントであり、JS出力はクライアントにキャッシュされ、ダウンロードサイズを削減します。
NPMスクリプトUI拡張機能（IDEから実行）で使用するDOTNETコマンド：
dotnet-run dotnet run 。dotnet-clean ： dotnet clean用。dotnet-build ： dotnet build用。SCSSスタイリングサポート
fe-scss-build ：グローバルCSSファイルwwwroot/style.cssは、インポートするSCSSファイルApp/scss/style.scssから圧縮形式で圧縮された形式で構築します。fe-scss-watch ：SCSS Files Files App/scss/style.scssから非圧縮形式のグローバルCSSファイルwwwroot/style.cssビルドします。 Indexページのサポートを作成します
fe-build ： IndexページのJavaScriptを作成します。出力は、ソースマップなしで圧縮形式のwwwroot/build/index.jsです。 JavaScriptファイルをデバッグすることはできません。これは生産用ですfe-watch ： IndexページのJavaScriptを構築します。出力は、ソースマップを使用して非圧縮形式のwwwroot/build/index.jsです。 JavaScriptファイルはデバッグできます。これは生産用ではありません。このプロセスは、ファイルの変更を監視し続け、それに応じて再構築します。これは、開発プロセスに役立ちます。注：他のページを構築または視聴するには、このコマンドラインnpm run fe-build <page>またはnpm run fe-build <page>を使用できます。ページ名は拡張機能のない小文字の構成ファイルです。たとえば./Pages/Index.rollup.config.js index.rollup.config.jsのindex 、 ./Pages/Login.rollup.config.js login.rollup.config.jsのloginなど。
すべてのページ
fe-build-all ：FrontEnd Build-All。 Scripts/build-all.jsスクリプトを呼び出して、すべてのページとすべてのスタイルシートをビルドしてコンパイルします。fe-watch-all: Frontend watch-all. Calls Scripts/Watch-All.jsのスクリプトfe-watch-all: Frontend watch-all. Calls 、すべてのページとすべてのスタイルシートを構築、コンパイル、監視します。他の：
npm-upgrade ：すべてのNPM依存関係を最新バージョンにアップグレードします。これを慎重に使用してください。このコマンドを実行できるようにするには、グローバルnpm-check-updates依存関係が必要です。 npm install -g npm-check-updatesを使用してインストールします。code ：ビジュアルスタジオコードの1つのインスタンスを開きますbuild-urlsすべてのアプリケーションURLを含むshared/urls.tsファイルを自動的に作成する.NET C＃スクリプトを呼び出します。バックエンドを構築し、スクリプトコマンドを実行して存在します。このコマンドは、 UrlBuilderPath構成キーを使用します。build-models -modelネームスペースからすべてのモデルインターフェイスを含むshared/models.d.tsファイルを自動的に作成する.NET C＃スクリプトを呼び出します。バックエンドを構築し、スクリプトコマンドを実行して存在します。このコマンドは、 ModelNamespace Configuration Key（ RazorSvelte.SampleData ）の下にある名前空間に存在するタイプスクリプトインターフェイスに翻訳されたすべてのC＃パブリッククラスを含む、構成キーTsModelsFilePath （ shared/models.d.ts ）に設定されたtypeScriptファイルを作成します。 はい。
ブラウザデバッグコンソールを使用して、通常どおりにデバッグできます。 JavaScriptには、関連する.mapファイルが必要です。
.mapファイルを実行するには、 -wスイッチを使用して引数としてrollupと構成ファイル]を実行します。例えば：
rollup -c ./Pages/Index.cshtml.js -w
このコマンドは、ブラウザでのデバッグを有効にする関連マップを備えた非圧縮wwwroot/build/index.jsファイルを作成します。
[ブラウザソース]タブに、普通にデバッグできるApp/index.svetle TypeScriptファイルが表示されます。
また、このコマンドはソースファイルを監視し続け、変更を続けるにつれて段階的に構築されます。
はい。
「すべてを作成する」コマンドを使用しないでください。代わりに、前の質問で上記のように増分ビルドを使用します。
いいえ、外部サーバーは必要ありません。
このプロジェクトでは、組み込みの.NET Webサーバーを使用しています。
ただし、ロールアップコマンドを実行するには、nodejsとnpmをインストールする必要があります。
クライアントIDとクライアントシークレット値を取得して、構成ファイルに貼り付けて、これらのサービスにログインアプリを作成する必要があります。
詳細については、appsettings.jsonを参照してください。
外部プロバイダーからの承認が渡されると、アプリケーションは、外部プロバイダーによってすでに確認されているIDに対してJWT AUTHを使用します。したがって、値を使用してJwtConfigSectionを構成する必要があります。
Secret - 長い秘密のランダムな文字列Issuer -JWTトークン発行者Audience -JWTトークンオーディエンスExpirationMin -JWTトークンの有効期限時間ClockSkewMin jwtトークンの有効期限に追加され、回避するためにnullに設定します。RefreshTokenExpirationMinトークンの有効期間を更新します。更新トークンの使用を避けるためにnullに設定します。使用する場合は、有効にするにはトークンの有効期限よりも長くなければなりません。CookieExpirationMin数分でCookieの有効期限。使用する場合は、トークンの有効期限よりも長く、トークンの有効期限を更新する必要があります。CookieNameセキュリティクッキーの名前。注：トークン更新オプションを使用する場合は、メモリ内の辞書ではなく、データベースまたは何らかの永続的なキャッシュを使用するために、 RefreshTokenRepositoryクラスを再実装することをお勧めします。
ページルーティングは、ASP.NET Webサーバーによってサーバー上で引き続き処理されます。つまり、このプロジェクトはシングルページアプリケーション（SPA）ではありませんが、マークアップ全体がスベルト出力に含まれているため、スパでクライアントにキャッシュされています。
ただし、サーバールート/spaの1つは、SPAアプリケーションの例です。このページではsvelte-spa-routerを使用して、ハッシュタグルートを備えたさまざまなスパビューを示しています。
はい、たとえば、非表示の入力を使用して。
<input id="title" type="hidden" value="@ViewData["Title"]" />ページに。 import { getValue } from "./shared/config" ;
let title = getValue < string > ( "title" ) ;開発と維持がはるかに簡単かつ高速であることに加えて、はい、より速いです。マークアップ全体が封じ込められ、SvelteコンポーネントからJavaScriptファイルをコンパイルした内部に削除し、その後初めてダウンロードされ、新しいリクエストごとにキャッシュされます。
これにより、アプリケーションのネットワークトラフィックが大幅に削減されます。
その後、ページが読み込まれるとマークアップが即座にレンダリングされます。
Copyright（c）VedranBilopavlović -VBコンサルティングおよびVBソフトウェア2022このソースコードは、MITライセンスの下でライセンスされています。
