Create Snowpack App を試す (2) 。
npx create-snowpack-app pkg2 --template @snowpack/app-template-react
$ exa -T --git-ignore --group-directories-first . ├── public │ ├── favicon.ico │ ├── index.html │ └── robots.txt ├── src │ ├── App.css │ ├── App.jsx │ ├── App.test.jsx │ ├── index.css │ ├── index.jsx │ └── logo.svg ├── babel.config.json ├── jest.config.js ├── jest.setup.js ├── LICENSE ├── package-lock.json ├── package.json ├── README.md └── snowpack.config.json
気になるのは snowpack.config.json
の extends
くらいだろうか。昨日のテンプレートとは違ってこちらには scripts
に何も書かれていないが昨日と似たような動きになっている。おそらく "extends": "@snowpack/app-scripts-react",
がそれに設定を提供している。
tsconfig.json
があるときの isTS
の部分は無視する。 scripts
には昨日と同じビルドスクリプトが入っている。
const scripts = { "mount:public": "mount public --to /", "mount:src": "mount src --to /_dist_", };
あとは plugins: ["@snowpack/plugin-babel", "@snowpack/plugin-dotenv"],
でプラグインを追加している。
- https://github.com/pikapkg/create-snowpack-app/tree/master/packages/plugin-babel
- https://github.com/pikapkg/create-snowpack-app/blob/master/packages/plugin-dotenv
ふむ。
mount:web_modules
は固定で存在するのかな……。設定からは見当たらない。
横道にそれるけど tsc --noEmit
で型検査だけをして @babel/plugin-transform-typescript
(@babel/preset-typescript
から読み込まれる) で型情報を落として使うのってよくあるのかな……。 babel を中心に使う場合はこの形のほうが都合が良いのかな。
このテンプレートで分かることも少なそうなので手を入れてみる。
mount
script type
snowpack.config.json
で mount
スクリプトタイプを試してみる。
{ "extends": "@snowpack/app-scripts-react", "scripts": { "mount:foo": "mount foo --to /bar" }, "plugins": [] }
$ mkdir foo $ echo foobar > foo/dummy.txt
一度 Ctrl-c で停止して npm start
(snowpack dev
) で再起動する。起動時の表示に ↓ が追加された。
mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules mount:foo...............[DONE] mount foo --to /bar mount:public............[DONE] mount public --to / mount:src...............[DONE] mount src --to /_dist_ build:js,jsx,ts,tsx.....[READY] (plugin) @snowpack/plugin-babel
$ curl http://localhost:8080/bar/dummy.txt foobar
うん。きちんと /bar
でマウントされている。
$ npm run build # snowpack build Snowpack ./build Building your application... mount:web_modules.......[DONE] mount $WEB_MODULES --to /web_modules mount:foo...............[DONE] mount foo --to /bar mount:public............[DONE] mount public --to / mount:src...............[DONE] mount src --to /_dist_ build:js,jsx,ts,tsx.....[DONE] (plugin) @snowpack/plugin-babel 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 --git-ignore --group-directories-first build/bar build/bar └── dummy.txt
ビルド済みのファイルにも含まれる。良さそう。
明日は build スクリプトタイプを試すかな。
ABC032 C を解いた。しゃくとり法。
リングフィットアドベンチャー 8 日目 レベル 27 ワールド 4 の途中に居る。