Snowpack
開発者はFred K. Schott
以前はpika/webという名前だった
2020/4ごろにメンテ終了している
website
github
リリース状況 ref
2021/5/15現在の最新はv3.4.0
twitter
内部でRollup.jsを使用
Tree Shakingもする
と、どこかで書いてた気がする
esbuild を内部的に使ったビルドツール
npmのpackageをES Modulesの形式に変換する
よってブラウザでも読み込めるようになる
外部ライブラリのimportは今までと同じノリでできる
現状ES Modulesがあればだいたいなんとかなる
しかし、使用したい外部ライブラリ(例えばReact)が、ES Modulesに未対応だと
webpackなどのbundlerを使わないとimport React ...みたいな構文が使えない
ここで、ReactがESModuleに対応していれば、bundlerを使わずに、この構文で書ける
じゃあ、ESM未対応のライブラリをESMに変換すればいい
それがSnowpackがやってること
これによってbundlerが不要になる
使用したいライブラリを一度ESMに変換しちゃえばそれ以降変換掛ける必要がない
だから、「コードを修正するたびにbundle」みたいな処理が不要になる
チャンク分割が簡単になる
https://qiita.com/kazuma1989/items/30676cb3d2da1c873507#チャンク分割が簡単
コレナンデ7日いまいちよくわからん #??
#??
内部のmoduleは誰がbundleしたりするの #??
esmならそのままできるってことか?
ESMが対応していないブラウザならbundlerないと無理なので無理ってことか
node_modulesはもはやlocalに置かないのか
↓あまり良く知らないのでこんなふうにメモってるが、触ったりして理解進めばこういうメモは不要mrsekut.icon
@pika/web時代の記事
https://www.infoq.com/jp/news/2019/09/pika-web-no-npm-bundler/
v1時代
外部ライブラリのESM変換部分のみをやる
自分らで書く部分であるアプリケーションコードはノータッチ
だから、TSと使ってるとBabelかなんかでESMに変換する必要がある
importの構文はimport React from '/web_modules/react.js'
https://qiita.com/nabeliwo/items/67cc7f2c67c905eddbc7
https://qiita.com/kazuma1989/items/2545845087b86e35b9ce
https://qiita.com/yukukotani/items/dfe236d29f97b0986b91#fnref1
https://qiita.com/nabeliwo/items/67cc7f2c67c905eddbc7#一つのファイルにバンドルしないからこその強みがある
v2時代の記事
開発サーバーが組み込みに
ここでいう開発サーバーってなに #??
後のskypackかmrsekut.icon
importの構文はimport React from 'react'
内部でESBuildを使い始めたのもv2から?
https://www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/
https://qiita.com/kazuma1989/items/30676cb3d2da1c873507#fn1
v1からの変更点など
v3時代の記事
https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0
https://www.infoq.com/jp/news/2021/04/snowpack-3-stream-imports/
streaming imports
https://www.snowpack.dev/guides/streaming-imports
Skypack CDNからfetchする
localでbundleしない
import "preact"はimport "https://pkg.snowpack.dev/preact" に変換される
Denoっぽいmrsekut.icon
オフラインではキャッシュを使用
https://uit-inside.linecorp.com/episode/90