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", がそれに設定を提供している。

https://github.com/pikapkg/create-snowpack-app/blob/e090501e20951254670e04a1fd037a3db7b2e40f/packages/app-scripts-react/snowpack.config.js

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 の途中に居る。