Help us understand the problem. What is going on with this article?

モジュールバンドラを使わないモダン Web 開発を実現する「Snowpack」

はじめに

Node.js の登場により JavaScript の世界にモジュールの概念が導入されました。そして npm によって多くの JavaScript パッケージが配布されるようになりました。
しかし、Node.js のモジュールシステムは当然ブラウザでは動かず、古の Web ブラウザではモジュールを解決する仕組みがありませんでした。
そのためモダン Web 開発においては、 webpack や Rollup のようなモジュールバンドラを用いて、依存するモジュールを含む単一の JavaScript ファイルを生成するのが一般的です。

Node.js の登場から数年経ち、Google Chrome を始めとするモダンブラウザでは ECMAScript 2015 から導入された ECMAScript Modules (以下 ESModules) というモジュールシステムが実装されて、モジュールバンドラを使うことなくモジュールを使うことができるようになりました。

Fred K. Schott によって開発された Snowpack1 は、ESModules を用いたモジュールバンドラを使わない2モダン Web 開発のためのツールです。

やってくれること

Snowpack の主な役割は依存パッケージのセットアップです。アプリケーション自体のソースコードに手を加えることはありません。
package.json やソースコードから依存するパッケージを抽出し、それぞれのパッケージを単一の JavaScript ファイルとして /web_modules ディレクトリに配置します。

アプリケーションからは単純に /web_modules 内のパッケージを import するだけです。

やってみる

package.json の存在するディレクトリで下記コマンドを実行すると、 dependencies のパッケージを /web_modules ディレクトリにインストールします。

npx snowpack

もしくは -include オプションを用いて、ソースコードから依存するモジュールを解析することもできます。

npx snowpack --include \"dist/**/*.js\"

インストールしたパッケージはアプリケーションからは相対パスで import することができます。例えば Hyperapp が dependencies にある場合はこのようになります。

import { h, app } from "/web_modules/hyperapp.js";

また、TypeScript や Babel との連携も容易です。いつも通りトランスパイルしてから、それに対して Snowpack をかけます。

babel src/ -d dist
npx snowpack --include \"dist/**/*.js\" --dest dist/web_modules

詳しくは Hyperapp と Babel を用いたサンプルを作ったので、こちらを参照してください。 package.json の scripts あたりから適当にたどるとわかりやすいと思います。
https://github.com/Monchi/snowpack-hyperapp

モジュールバンドラは時代遅れか

決してそんなことはなく、Snowpack はモジュールバンドラを完全に置き換えるものではありません。

まず、Snowpack は ESModules 前提のツールです。IE のように ESModules が使えないレガシーブラウザをサポートすることができません。
追記: バンドルもできるようになりました
https://qiita.com/yukukotani/items/dfe236d29f97b0986b91#comment-db2dd39b38dcf1600968

また、モジュールバンドラの役割はもはや純粋なモジュールのバンドルだけにとどまりません。例えば webpack では各種 loader を用いて CSS や画像などを import することができますが、これは標準の ESModules の仕様には含まれていないため、ブラウザでは今のところ実現できません。

パフォーマンス面も一長一短です。モジュールバンドラは依存の依存まで含めて重複パッケージをまとめることができますが、Snowpack は依存パッケージごとに単一の JavaScript ファイルを生成するため、それができません。
一方で、Snowpack では依存パッケージごとに Code Splitting されているということでもあります。HTTP/2 や HTTP/3 の並列配信の恩恵を受けることができますし、将来的に Dynamic Import が実装されたら、パッケージを非同期に import してチューニングすることもできるでしょう。

モジュールバンドラを選ぶ理由は多くありますが、Snowpack はゼロロックインをコンセプトとしており、容易にこれまでのモジュールバンドラに戻ることができます。実際、Snowpack 特有の設定などはないですし、ECMAScript の仕様に準拠しています。移行ガイドもあるので、新規プロジェクトを Snowpack で初めてみるのは十分に現実的です。

最後に

Snowpack は極めてシンプルで、多くの機能は持ちません。その分ドキュメントにはその思想や背景が細かく書いてあるので、気になる方は読んでみてください。

まだプロダクションではレガシーブラウザを切れないケースが多いかと思いますが、近未来の Web 開発を感じることができるかと思います。また、Snowpack は Pika エコシステムの一部で、パッケージレジストリや CDN としても発展していくようなので、チェックしとくと面白そうです。

何か間違ったことを書いてしまっていたらコメントで教えてください。


  1. 1.0以前は @pika/web という名前だった 

  2. Snowpack の内部では依存パッケージをバンドルするために Rollup を使っているため、正確には隠蔽している 

dr-ubie
病気予測AIによる病院向け問診サービス、及び to C 向け病気予測サービスを運営するスタートアップ
https://ubie.life/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした