snowpack 事始め

https://www.snowpack.dev/
おもろそうだったので様子見
pika の系譜らしい
元々 @pika/web だったのが snowpack になったっぽい
シンプルに npm の module を web_modules 以下にバンドルしてくれて esm でロードできるようにしてくれるやつ、って感じか?

shell
y add preact
y add -D snowpack
snowpack
y add -D serve
serve
open http://localhost:5000

index.html
<div id="app"></div>
<script type="module" src="/src/app.js"></script>

src/app.js
import { h, Component, render } from '/web_modules/preact.js'

const app = h('div', null, 'Helloooo')

render(app, document.getElementById('app'))

動く


shell
y add htm
snowpack

src/app.js
import { h, Component, render } from '/web_modules/preact.js'
import htm from '/web_modules/htm.js'

const html = htm.bind(h)

const app = html`
  <div>yo yo</div>
`

render(app, document.getElementById('app'))

動く

shell
y add csz
snowpack

src/app.js
import { h, Component, render } from '/web_modules/preact.js'
import htm from '/web_modules/htm.js'
import css from '/web_modules/csz.js'

const html = htm.bind(h)

const style = css`
  color: #f00;
`

const app = html`
  <div class="${style}">yo yo</div>
`

render(app, document.getElementById('app'))

動く

一応 netlify にデプロイするとこまでやった
https://snowpack-sandbox.netlify.com/

snowpack
#20200108 #0108

関連ページとランダムに選ばれたページ

筆者について

jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。
さらに詳しく

寄附について

面白かったらBTCETHでの寄附をお待ちしております。
寄附のきろく