ビルドレスに行く

長距離の関係には、多くの場合、頻繁なフライトが含まれます。これらのフライト中、Redditに追いつくというアイデアは魅力的になります。オフラインのRedditアプリを検索する代わりに、私は独自に構築し、最新のWebテクノロジーと「ビルドレス」開発アプローチを紹介することにしました。

この投稿では、革新的なWeb開発者とその貢献を祝います。ステップバイステップのチュートリアルではありませんが、完全なコードはGitHubで利用できます。

目標はRedditリーダーであり、ツールと依存関係を最小限に抑えます。利用します：

• Litelement： Webコンポーネントを活用する軽量で使いやすいコンポーネントモデル。
• @Vaadin/Router：優れた開発者エクスペリエンスを備えたコンパクトルーター。
• @Pika/Web：開発中のモジュール管理を簡素化します。
• ES-DEV-SERVER：簡単なDEVサーバー（HTTPサーバーは機能しますが）。

また、ブラウザの標準、ESモジュール、Webコンポーネント、インポートマップ、KVストレージ、およびサービスワーカーの標準を活用します。

依存関係のインストール：

 npm i -s lit -element @vaadin/router
npm i -d @pika/web es-dev-server

package.jsonにpostinstallスクリプトを追加します：

 「スクリプト」：{
  「スタート」：「es-dev-server」、
  「ポストインストール」：「Pika-Web」
}

PIKA：依存関係を合理化します

Pika（Fred K. Schott by）は、Web開発を簡素化し、 web_modules/ Directoryに個々のJavaScriptファイルとして依存関係をインストールします。これにより、プロセスが簡素化され、複雑なビルド構成が回避されます。出力は次のとおりです。

 <code>└─ web_modules/ ├─ lit-element.js └─ @vaadin └─ router.js</code>

インポートマップ：ベア仕様を解決します

index.htmlには、ベアモジュールの仕様を処理するためのインポートマップが含まれています。

<script type="importmap">
  {
    "imports": {
      "@vaadin/router": "/web_modules/@vaadin/router.js",
      "lit-element": "/web_modules/lit-element.js"
    }
  }
</script>
<reddit-pwa-app></reddit-pwa-app>

reddit-pwa-app.js ：

 'lit-element'から{litelement、html}をimport;

クラスredditpwaappはlitelementを拡張します{
  与える（） {
    html`を返します<h1 id="こんにちは世界">こんにちは世界！</h1> `;
  }
}

customelements.define（ 'reddit-pwa-app'、redditpwaapp）;

インポートマップは、複雑なビルドプロセスなしでブラウザの互換性を有効にして、ベアモジュール仕様の問題を解決します。

サービスワーカー：オフライン機能

オフラインアクセスを有効にするために、 index.htmlに登録されているサービスワーカー（ sw.js ）を実装してください。

 if（ 'serviceworker' in Navigator）{
  window.addeventlistener（ 'load'、（）=> {
    navigator.serviceworker.register（ './ sw.js'）;
  }）;
}

サービスワーカーは資産を事前にキャッシュし、オフライン機能を確保します。 Pikaは、資産の明確なリストを提供することにより、これを簡素化します。 （ sw.js詳細については、GitHub Repoを参照してください）。

KVストレージ：オフラインデータの永続性

投稿をオフラインで保存するには、indexedDBの上に階層化された内蔵モジュールであるKVストレージを使用します。非同期操作を提供し、ローカルストレージ上のパフォーマンスの向上を提供します。ポリフィルは、より幅広いブラウザのサポートを確保するために使用されます。 （実装の詳細については、Github Repoを参照してください）。

インポートマップを使用したポリフィル

KVストレージポリフィル（ kv-storage-polyfill ）が含まれており、インポートマップを介して管理されており、ネイティブKVストレージが利用できない場合にフォールバックメカニズムを提供します。

結論

このプロジェクトは、最小限の依存関係で機能的なPWAを構築することを実証し、最新のWeb標準の利点とビルドレスアプローチの利点を強調しています。代替ビルドツールが存在しますが、この方法はシンプルさとアクセスの容易さを優先します。 GitHubリポジトリは、さらに探索するための完全なコードベースを提供します。フィードバックとディスカッションは、Twitter（@passle_または@openwc）およびopen-wc.orgで大歓迎です。

謝辞：

Guy Bedford（ES-Module-Shims）、Luke Jackson（「そのアプリを構築しないでください！」）、Benny Powers、Lars Den Bakkerの貢献に感謝します。

以上がビルドレスに行くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。