バンドラー、CDN、または Node.js を使用しないスマートな SPA

私は、file:// URL。私は、イニシアチブを段階的に成長させるというこの慣行をむさぼり食うので、その単一のファイルでできるだけ長く作業することにします. 扱いにくくなったら、CSS と JavaScript を専用のファイルに分割します。その後、ハンドブックの DOM 操作が複雑になりすぎたら、フロントフィニッシュフレームワークに手を伸ばします。しかし、最近まで、私はこのステップを実際に漸進的に感じさせることに特に気を配っていませんでした。ほとんどのフレームワークのインストールは、npm のセットアップ を暗示しています。その意図は、私の取り組みが NodeJS に依存するようになりました。一部のフレームワークは、ホストされた CDN の可能性を収集しますが、私はそのインフラストラクチャへの依存を受け入れることに同様に心を痛めています. 理想的には、フレームワークファイルを取得し、JavaScript からインポートして、file:// URL で永続化します。

成功しました、その正確なセットアップを成長させることは、私が予想していたよりも簡単でした. 私の最初の重要な発見は部。インポートマップを使用すると、バンドラーを使用せずに、指定された目的に依存する JavaScript モジュールを作成できます。最終的な結果は、流行りでありふれた感じの SPA ですが、コンパイル手順の必要はありません。 :

 importmap> { "imports": { "solid-js": "/node_modules/solid-js/dist/solid.js", "solid-js/html": "/node_modules/solid-js/html/dist/html.js", "solid-js/web": "/node_modules/solid-js/web/dist/web.js" } } module> // standard import declarations thanks to the import map above import html from 'solid-js/html' import { render } from 'solid-js/web' const HelloWorld = () => { // tagged template literals feel close enough to JSX (the defacto standard) return html`
Hello World!
` } render(HelloWorld, document.getElementById('app'))
 id=app>

それはすべてについて公平です。この HTML ファイルは流行のブラウザーのほとんどで解釈されますが、/node_modules/strong-js に配置する必要があるファイルを参照しています。 多分多分 npm setup でこれを停止しますが、現時点では驚くほど簡単にパッケージを安全にすることができます:
安全なパッケージ() { 建てる -eo pipefail ローカルパッケージ名=$1 地元パッケージ_バージョン=$2 地元 PACKAGE_CHECKSUM=$3 地元
PACKAGE_FILE
="
$パッケージ名– $PACKAGE_VERSION.tgz” # NPM のレジストリから tarball を安全にします mkdir -p “node_modules/ $パッケージ名” カール “https ://registry.npmjs.org/$PACKAGE_NAME/-/ $PACKAGE_FILEmodule> // standard import declarations thanks to the import map above import html from ‘solid-js/html‘ import { render } from ‘solid-js/web‘ const HelloWorld = () => { // tagged template literals feel close enough to JSX (the defacto standard) return html`
Hello World!
` } render(HelloWorld, document.getElementById(‘app‘)) “

> “node_modules/$PACKAGE_FILE” # tarball の SHA512 チェックサムをテストします地元 PACKAGE_SHA=`shasum -b -a 512 “node_modules/

$PACKAGE_FILE“ | awk ‘{ print $1 }’ | xxd -r -p | 無愛想64` # パッケージをその名前に一致するディレクトリに解凍します gunzip -dc

"node_modules/ $PACKAGE_FILE

“ | tar -xf – –ストリップ製剤 1 -C “node_modules/ $パッケージ名” } # https から手動でメタデータを提供してセットアップ://registry.npmjs.org/strong-js 安全なパッケージの strong-js 1.6.6 “5x33mEbPI8QLuywvFjQP4krjWDr8xiYFgZx9KCBH7b0ZzypQCHaUubob7bK6i+1u6nhaAqhWtvXS587Kb8DShA==”

それだけです: 流行りの JavaScript アプリで書くための私のバンドラー不要の設定です。依存関係を追加することを希望した後、safe-package を呼び出してから、インポートデザインでそれを明らかにします。私は、今道徳的に必要なNodeJSエコシステムのビットを使用して、私が最も素晴らしいと感じているという話で、この設定を楽しんでいます。プロジェクトの後半で、おそらく NodeJS が提供するものをさらに追加することを決定することもできますが、UI フレームワークを利用するためだけにそれを強制されることはもうありません. %% item_read_more_button%%

Related Posts