Snowpack とは
webpack や rollup などの代替として利用できるフロントエンドの依存解決を行うビルドツール、モジュールバンドラではなく、コードを ESM 形式に変換してモジュールとして利用できるようにする。
ES Modules までの歴史
- NodeJS が誕生、CommonJS を基にしたモジュール機能を実装
- RequireJS が誕生、AMD をブラウザ用に変換する
- Browserify が誕生、CommonJS をブラウザ用に変換する
- CommonJS でも AMD でも使える UMD が誕生
- Webpack が誕生、やたらと多機能で実質的にデファクト環境となる
- ES Modules の策定
つまり現状では CommonJS（CJS）、AMD、UMD、ES Modules（ESM） の４種類のモジュール形式が存在することになります。
ES Modules の誕生
フロントエンドの複雑化・肥大化にともなって ES Modules（ESM） という仕様が策定された、これは 2021年現在では既に Microsoft Edge を含む IE 以外のブラウザでは対応されており、Nodejs でも v12 以降は標準対応している。
普及しない ES Modules
じゃあ依存ファイルを ESM でガンガン import すれば良いよね！としたいところだったが、 いくつかの問題が存在していた。
- webpack 等のバンドラが開発環境として普及してしまっている
- npm で提供されているライブラリの多くが ESM に対応していない
- import に対応していないブラウザに対する互換性がまるでない
そして Snowpack の登場
ここで前述の問題を解決するための新たな手段として注目されているのが Snowpack というビルドツールで、これは単純にいうと npm ライブラリを ESM 形式に変換して出力するというビルドツールである。
※これはつまり ESM をサポートしている Deno でも npm の資産が使えるようになることも意味しています。
なお現状ではファイルのバンドルだけではなく、JSX や Vue テンプレートファイルの変換とかもしてると思うので、それらの対応についても解説しておきます。
フレームワークへの対応
Snowpack には create-snowpack-app というボイラープレートが存在しており、簡単にいうと React や VueJS などのフレームワークを Snowpack で変換する際の開発環境があらかじめ用意されています。
これにより JSX や Vueファイル、Svelteファイルの変換などが行えます。
create-snowpack-app のテンプレート一覧はこちら
React
npx create-snowpack-app yourappname --template @snowpack/app-template-react
npx create-snowpack-app yourappname --template @snowpack/app-template-react-typescript
Vue
npx create-snowpack-app yourappname --template @snowpack/app-template-vue
npx create-snowpack-app yourappname --template @snowpack/app-template-vue-typescript
Svelte
npx create-snowpack-app yourappname --template @snowpack/app-template-svelte
npx create-snowpack-app yourappname --template @snowpack/app-template-svelte-typescript
WebWorker 対応
2021年1月現在では WebWorker 内での ES Modules は全てのブラウザで対応しているわけではありません、これに関しては、Snowpack v 3.0.0 と Snowpack Webpack v5 plugin の両方で自動的にバンドルファイルを出力するようになりました。
IE対応
npm snowpachk --nomodule
でレガシーブラウザ用に旧来のようにバンドルしたJSファイルを出力できるが、ドキュメントに書いてない気がする。