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