Snowpackを学ぶ：高性能フロントエンドビルドツール

この記事では、Snowpack 3の最初の外観を提供します。これは、バンドリングへのユニークなアプローチで人気を博しているフロントエンドビルドツールです。 Webpackなどの従来のツールとは異なり、SnowpackはネイティブブラウザーESモジュールサポートをレバレッジして、開発サイクルを高速化します。

キーハイライト：

• 開発の高速：Snowpackは、開発中に個別にモジュールを提供し、従来のバンドラーの時間のかかる再バンドルプロセスを回避します。 変更は即座に反映されます。
• esモジュールフォーカス： SnowpackはESモジュールのみをサポートしています。 CommonJS依存関係は、ミニバンドルを作成することにより処理されます
Versatile Syntaxサポート：ファイル内）、TypeScript、およびその他の一般的なWebテクノロジーをサポートしています。 生産の最適化：.jsxSnowpackは開発中にすべてのファイルを1つにバンドルすることはありませんが、Webパックまたはロールアップ（プラグインを介して）と統合され、生産ビルドと最適化を可能にする実験的なESBUILD統合を提供します。 🎜>
• ビルドツールの簡単な履歴：

ESモジュールの前に、JavaScriptには堅牢なモジュールシステムがありませんでした。 多くの場合、コードはグローバルな範囲に配置され、命令の競合につながりました。 node.jsは、commonjsモジュールを導入しました。これは、ブラウザの使用に適合したbrowserifyやwebpackなどのツールを導入し、commonjsコードを単一のファイルにバンドリングします。 ESモジュールは多くの問題を解決しましたが、最初のブラウザのサポートが不足しており、開発中であってもバンドリングが必要でした。

Snowpackの革新的なアプローチ：

Snowpackのコア強度は、その「バンドルされていない」開発ワークフローです。 最新のブラウザESモジュールサポートをレバレッジして、各モジュールを別のファイルとして提供します。 これにより、開発の反復が劇的に高速化されます。 CommonJS依存関係は、自動的に小さな孤立した単位にバンドルされます

スノーパックを始めましょう：

プロジェクトディレクトリを作成し、npm（

）を初期化します

スノーパックをインストール：

スクリプトを

：

に追加します
1. npm init -y
2. npm install --save-dev snowpackcreate
および
3. 。 ESモジュールのpackage.jsonタグで
属性を使用することを忘れないでください。

"scripts": {
  "start": "snowpack dev",
  "build": "snowpack build"
}

開発サーバーを起動するために

4. index.html app.js type="module"<script></script>ESモジュールとNPM依存関係を操作：

5. SnowpackはESモジュールをシームレスに処理します。 CommonJS依存関係については、自動的にバンドルします。 パッケージ（例えば、プアクト）を

   を使用してインストールし、コードにインポートするのは簡単です。 npm start

   jsxサポート：

SnowpackはJSXをサポートしていますが、すべてのJSXコードが.jsxファイルに居住する必要があります。

生産ビルド（バンドリング）：

Snowpackは、Webpackまたはロールアップを使用した生産用のプラグインを使用しているか、実験的なEsbuild統合を提供します。 このステップはコードを模倣し、最適化を実行します。 堅牢性には、Webpackプラグインが推奨されます。 ESBUILDオプションは有望ですが、それでも実験的です

結論：

Snowpackは、束縛されていない開発アプローチのおかげで、従来のバンドラーと比較して開発者エクスペリエンスを大幅に改善します。 さまざまなフレームワークとそのプラグインアーキテクチャのサポートにより、最新のWeb開発のための多用途で強力なツールになります。 現在、生産バンドルはプラグインに依存していますが、Esbuildとの将来の統合は注目に値する開発です。

Snowpack FAQ（概要）：

スノーパックとは何ですか？

ブラウザESモジュールのサポートを高速な開発にレバレッジ化する軽量ビルドツール。
• どのように違いますか？束縛されていない開発、より速い反復。
• 適切なプロジェクト？モジュラーコードを備えた最新のWebアプリ。
• フレームワークの互換性？React、Vue、Angularなどで動作します
• 依存関係の処理？開発中の個々のESMファイル、生産にバンドルされています。
レガシーブラウザのサポート？
• 最新のブラウザ向けに最適化されています。レガシーサポートにはバベルが必要になる場合があります
snowpackの機能を紹介するgithubデモが利用可能です（リンクは簡潔に省略されています）。

以上がSnowpackを学ぶ：高性能フロントエンドビルドツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。