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 の途中に居る。
慣れてきた。色バトルが入ってからは色やダメージを気にしてしまっている。無心に体を動かせないのかいまひとつ楽しめていない。
