完全なスタックDenoアプリケーションを作成するためのツールの構築

次の記事はDenopackを開発し維持している間に学んだ教訓の統合です.DENPATHでコードを束ねて/コード化するためのツールセット.
中deno bundle バンドルが必要とされる大部分のケースをカバーします、木揺れと鉱化のような人気のユースケースは急速に必死になっています.
これはDenopackの開発にとっての基本的な動機でした.ノードとNPMを使いたくないDEVSのためのバンドルリングの経験を提供します.

バンドルとミニ

バンドルするAPIを提供するいくつかのルートがありました.最初に、2つの最も顕著なオプションは、それを自分で書くか、または上に構築することでしたdeno bundle .
しかし、ノードの生態系はすでに信じられないほど強力なバンドルを持っています.その理由は、ロールプを使用しようとしていたのです.これを達成するにはいくつかのパスがありました.

また、保守主がDenoとして発行することを望みます

パッケージを拒否し、それを維持します.

パッケージのブラウザ版(存在する場合)を使用します.

すべてのこれらのオプションから、最後のものは、最終的に最も意味をなしました.ロールアップのメンテナは、指示されたバージョンを含んでいません、そして、パッケージを移植することはまた、あなたが内部に慣れていないならば、手動のメンテナンス、頭痛とそれ自体を意味しました.
ブラウザのバージョンを使用すると、CLIとファイルシステムへのアクセス(ローディングとライティングファイル)を手動で追加する必要がありました.これはDenopack CLIと様々なベースプラグインをキャッシュ、ディスク、リモートから読み込むようにしました.
ミニ化の話題になったとき、それは我々がターサーを使っているGet Goから明らかでした.そして、ここでの選択もブラウザビルドと一緒に行くことでした.terserのブラウザ版では、依存関係をグローバル変数にエクスポートするのではなく、これを行う必要があります.

import "https://unpkg.com/[email protected]/dist/source-map.js";
import "https://unpkg.com/[email protected]/dist/bundle.min.js";

import { AST_Node, MinifyOptions, MinifyOutput } from "./terser.d.ts";

export const minify: (
  files: string | string[] | { [file: string]: string } | AST_Node,
  options?: MinifyOptions
) => MinifyOutput = (globalThis as any).Terser.minify;

教訓

既存のバンドルから始まることは正しいパスであることを証明しました、これが潜在的にすでにテストされていたすべての既存のプラグインを使用するのを許容した時から.

ブラウザのバージョンは、一般的に非常に簡単にドロップし、使用している小さなパッケージですが、主要なトレードオフが付属しています.多くの場合、それはまだ良い選択です、パッケージを手動で書き換えることと比較して(そして、それを最新にして).
どんな更なるトレードオフとパフォーマンス・カットとでも戦うために、我々は適切なdeno + ESM構文をサポートするためにコードの主要な部分を自動的にポリフィル/書き直すことができる解決を提供する努力をしています.

コンパイラAPIの、lockfilesと時計モード

プロセスの次のステップは、typescriptサポートを処理することでした.幸運にも、denoはコンパイルして、放出して、denoオブジェクトのAPIの内部として束ねることを公開します--unstable フラグ).
両方Deno.compile ASDeno.transpile 別のプラグインにした.後見付けにおいて、あるシナリオとして必要な選択は、異なるアプローチを必要とする.

最大の問題は、現在のところDeno.compile Denopackまたはユーザーがコントロールしていないランタイムキャッシュを使用します.まだ.これは、現在のストレートアップコンパイルのための時計モード(rollupのキャッシュ機能を使用して)とよくブレンドされませんが、手動でのファイルの解像度とキャッシュの読み込みの抽象化にExcelを行います.Deno.transpile , 一方、効率的な単一ファイル処理になると、ケーキがかかります.コンパイルはCSSの資産を認識していないので、実際にはJS/TSコードとしてそれを解決しようとします.一方、トランスファーは本質的にタイプ・ストリップされたコードを発します.Translileまた、あなたが反応で働いている場合には、JSX構文を移してください.
lockfileサポートと増分コンパイル/ウォッチモードの追加はDenopackの最初の主要な章の終わりをマークしました.ウォッチモードはまだベータと考えられています.コンパイルとの互換性のためだけではなく、ログープのネイティブウォッチャーAPIへのアクセスもありません.CSSやHTMLのような外部の資産に対してより信頼性の高い状況になります.

教訓

TL ;ドクターフォーDeno.compile 対Deno.transpile :

あなたが外部の資産なしでバックエンド・アプリケーションまたは温泉に取り組んでいるとき、コンパイルを使用してください、そして、あなたは腕時計支持を必要としません.あなたがF . E . A反応スパを書いているならば、あなたは外部のスタイルまたはJS解決でCSSと結びつきます(私は、Otionをチェックすることを強く推薦します).

すぐにアイデアを反復したり、CSS、SVG、…のような資産へのアクセスを必要とするフロントエンドアプリケーションを構築したい場合には、速やかに使用してください.JS/TSコンテキストで.

Rollupの非ブラウザ機能へのアクセスは現在Denopackの将来の章を持っている必要があります.これはおそらくバンドル操作と適切な時計/増分サポートを可能にする最も効率的な方法でしょう.

次の章：フロントエンドにフォーカス

次にDonopackをどこで取るかを決める前に、私はそれをdocumentation site .
これは、最初の努力をローディング/発光資産に入れていた、それは非常に滑らかな経験のように感じた.結果はgithubの/docsセクションにあります.
最終的に、これは私たちが個人的に最も快適なフィールドにフォーカスをシフトすることを意味:フロントエンド.HTML、CSS、およびdevサーバのプラグインの追加は、Webアプリケーション開発者のためのオプションとDXを大幅に増加させ、Denopackで作成した反応アプリスターターを再実装することを簡単にしました.which can be found here .
我々は現在、郵便番号、バベル、Vue、Svelteと多くの追加を探索している.メニューの下にさらに、様々なフロントエンド(およびバックエンド)に対するXYZの動作を追加するDEMOで利用できるフレームワーク、SSRサポートも同様です.JSとギャツビー.
目標は、できるだけ包括的になるとDenopackは、当社のユーザーのためのワンストップショップを作ることです.

denopackを見つける

💻 https://denopack.mod.land
🐙 https://github.com/denofn/denopack
🦕 https://deno.land/x/denopack
🥚 https://nest.land/package/denopack