BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Snowpack 3 ビルドツールは、最新のフロントエンド開発をさらに能率化する

Snowpack 3 ビルドツールは、最新のフロントエンド開発をさらに能率化する

原文(投稿日:2021/01/24)へのリンク

Snowpack フロントエンドビルドツールの3番目の主要なイテレーションは、事前バンドルされたストリーミングインポート、統合されたビルド最適化、および JavaScript/Node API とともに先頃リリースされた。Snowpack 3 は、2020 JS Open Source開発者生産性向上賞 (developer productivity boost award) を受賞し、2020 State of JS 調査で開発者の関心と満足度のトップにランクされている。

Snowpack のメンテナであるFred K. Schott氏は、Snowpack の使命を思い出させた:

1年前、Snowpack は、最新のJavaScriptとESMのWeb開発を再考するという使命を持って最初にリリースされました。Snowpack は、最新のWeb機能を活用して、プロジェクトのサイズに関係なく、起動して新しいファイルの変更に対応するのにわずか50ミリ秒のフロントエンドビルドツールを提供します。

2020年1月に出荷された Snowpack の最初の主要なイテレーションでは、最新のブラウザをターゲットにし、JavaScript標準化モジュールシステムであるESMモジュールを使用することに制限した開発者向けにオプトイン最適化プロセスをバンドルした。その他の制限には、一部のバンドラのみが理解できる非標準のJavaScript構文を使用しないことが含まれていた (たとえば、Webpackでサポートされている import "./app.css" 構文) 。

2回目の反復では、プロジェクトのサイズに関係なく、一定時間のビルドが特徴 (50ミリ秒未満であると主張) だった。これは、プロジェクトのサイズに比例して増加する開発ビルド時間と、これにより、大規模なプロジェクトのビルド時間短縮するためのアドホック手法が急増 (プラグインのアップグレードイメージローダの投棄など) したのとは対照的だ。

Snowpack プロダクションビルドは、バンドラプラグインを介して最適化できる。ただし、開発では、開発者はデフォルトで開発速度と短いフィードバックループ用に最適化されている Snowpack ビルドを使用するかもしれない。

Snowpack 3 は、インポートをローカルにバンドルするのではなく、リモートCDNから自動的にフェッチすることでさらに一歩進んでいる。この機能はオプトインであり、snowpack.config.js ファイルの packageOptions プロパティで構成される:

// snowpack.config.js
"packageOptions": {  "source": "remote"}

したがって、import "preact"import "https://pkg.snowpack.dev/preact" に変換される。Deno と同様に、Snowpack はURLでパッケージをフェッチする。Snowpack は必要な場合にのみこれを行い、レスポンスは将来のオフラインでの使用のためにキャッシュされる。

ストリーミングインポートと呼ばれるこの機能により、開発者はパッケージをフェッチするための npm への依存をなくすことができる。最良の場合、npmnode への依存関係は完全に削除される可能性がある。Snowpackリリースノートは、ストリーミングインポート機能を採用する主な理由として、速度、安全性、およびシンプルさを持ち上げている。ストリーミングインポートは TypeScript でうまく機能する。Snowpack は、JavaScript以外のパッケージ (Svelte および Vue ファイル) のサポートの改善に取り組んでいる。

Snowpack 3 は、esbuild (デフォルト) またはバンドル固有のプラグインを介してプロダクション用に最適化およびバンドルする。Go で記述され、ネイティブコードにコンパイルされた esbuild は、マルチコアプロセッサ上での並列化タスクとデータ変換の最小化により、比類のないバンドル速度を売り込んでいる。ただし、esbuildまだプロダクション環境に対応していない。Snowpack チームは、現時点では小規模なプロジェクトに esbuild を推奨している。他のプロジェクトでは、Webpack プラグインRollup プラグインが、特定の目的のプラグイン (CSS、Svelte、Angular、Unicodeなど) のリストとともに利用できる。

Snowpack には、Snowpack 上でカスタム統合と処理を構築できる新しい JavaScript APINode.js ランタイムが追加で付属している。このような統合には、Svelte の新しいWebアプリフレームワーク SvelteKit と Microsite 静的サイトジェネレータがある。新しい Node.js ランタイムも

Snowpack は、MITライセンスのオープンソースプロジェクトだ。貢献は大歓迎であり、貢献ガイドラインに従う必要がある。フィードバックは、プロジェクトの GitHub リポジトリを通して提供できる。

この記事に星をつける

おすすめ度
スタイル

BT