2020-06-24 Create Snowpack App を @snowpack/app-template-blank で試した

Create Snowpack App (CSA) を @snowpack/app-template-blank で試してみた。

https://www.snowpack.dev/#create-snowpack-app-(csa)

$ npx create-snowpack-app pkg1 --template @snowpack/app-template-blank
$ exa -T --git-ignore --group-directories-first
.
├── public
│  ├── favicon.ico
│  ├── index.css
│  ├── index.html
│  ├── logo.svg
│  └── robots.txt
├── src
│  └── index.js
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
└── snowpack.config.json

$ npm start
Snowpack

  http://localhost:8080 > http://192.168.1.2:8080
  Server started in 20ms.

  mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules
  mount:public............[DONE] mount public --to /
  mount:src...............[DONE] mount src --to /_dist_
  build:js,jsx,ts,tsx.....[READY] (default) esbuild

$ npm run build
Snowpack

  ./build Building your application...

  mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules
  mount:public............[DONE] mount public --to /
  mount:src...............[DONE] mount src --to /_dist_
  build:js,jsx,ts,tsx.....[DONE] (default) esbuild
  bundle:*................[SKIP]

▼ bundle:*

  "plugins": ["@snowpack/plugin-webpack"]

  Connect a bundler plugin to optimize your build for production.
  Set "devOptions.bundle" configuration to false to remove this message.

▶ Build Complete!

$ exa -T --group-directories-first build
build
├── __snowpack__
│  └── env.js
├── _dist_
│  └── index.js
├── web_modules
│  ├── canvas-confetti.js
│  └── import-map.json
├── favicon.ico
├── index.css
├── index.html
├── logo.svg
└── robots.txt

index.html からは <script type="module" src="/_dist/index.js"></script> とされている。

_dist_/index.js からは import confetti from "/web_modules/canvas-confetti.js"; とされている。

/web_modules/canvas-confetti.js はどう変換しているかまでは見ていないけど ESM に変換されている (もともと canvas-confetti.browser.js と canvas-confetti.module.mjs が提供されているけど export default __pika_web_default_export_for_treeshaking__; のような行が追加されている) 。

import-map.json は ↓。変換時に使っていて変換後はたぶん何もしていないはず。

{
  "imports": {
    "canvas-confetti": "./canvas-confetti.js"
  }
}

メッセージに合わせて webpack のプラグインを入れて bundle してみる。

$ npm i -D @snowpack/plugin-webpack
$ code snowpack.config.js # "@snowpack/plugin-webpack" を plugins に追加する
$ npm run build # Error: Cannot find module '@babel/core'
$ npm i -D @babel/core
$ npm run build # Error: Cannot find module '@babel/preset-env'
$ npm i -D @babel/preset-env
$ npm run build
Snowpack

  ./build Building your application...

  mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules
  mount:public............[DONE] mount public --to /
  mount:src...............[DONE] mount src --to /_dist_
  build:js,jsx,ts,tsx.....[DONE] (default) esbuild
  bundle:*................[DONE] (plugin) @snowpack/plugin-webpack

▶ Build Complete!
$ exa -T --group-directories-first build
build
├── __snowpack__
│  └── env.js
├── js
│  └── index.03b784d89d59b501663d.js
├── favicon.ico
├── index.css
├── index.html
├── logo.svg
└── robots.txt

エラーになるので npm i ... を追加した。とりあえず動いた。

package.json を確認する。

npm run build は snowpack build に相当する
npm start は snowpack dev に相当する
name や version などがないのは気になる
prettier や .prettierrc が入っているけど…… blank なのに……まあいいか……

snowpack.config.json を確認する。

scripts 昨日読んだはずだけどよく分からない
plugins さきほど追加した @snowpack/plugin-webpack が入っている

Configuration の scripts について改めて確認する。

https://www.snowpack.dev/#config-files

Set build scripts to transform your source files.

https://www.snowpack.dev/#build-scripts

ビルドスクリプトは単純な bash スクリプト。標準入力と標準出力でつなぐビルドパイプライン。

例を引用する。

// snowpack.config.json
{
  "scripts": {
    // Pipe every .css file through PostCSS CLI
    "build:css": "postcss"
  }
}

build スクリプトタイプを使っている。 css という拡張子のファイルを postcss コマンドで処理する。なるほど。プロジェクト全体のものを処理するからディレクトリを分けるなりして mount スクリプトタイプでなんとかしろと書いてある。ふーん。

https://www.snowpack.dev/#all-script-types

build: 個別ファイルの変換。パイプで処理されるイメージ。↑ の。
run: 複数ファイルやプロジェクト全体を処理するときに良い。
mount: --to で指定した位置にファイルをコピーする。

分かるようでいまひとつ分からない。明日は別のテンプレートを見てみよう。

EDPC F (LCS) を解いた。蟻本の LCS + 復元になっていて難しくなっていた。

ABC032 A, B を解いた。途中。 Accepted Count 545 。

リングフィットアドベンチャー 7 日目レベル 24 ワールド 4 の途中に居る。

慣れてきた。色バトルが入ってからは色やダメージを気にしてしまっている。無心に体を動かせないのかいまひとつ楽しめていない。