PureScript開発環境をゲットしたメモ
↑ポートフォリオサイトのレポジトリですが，今回はここの開発環境についてです
(メモなので)簡単に
・フレームワークとしてHalogenを使用
・開発中のビルドにwebpackを使用
設定ファイルとかはリポジトリとかを参照．
大事なのは ~.config.js とか entry.js あたりです
仕組み
・開発
PureScript --spago(ビルド)-> CommonJS --webpack(バンドル)-> index.js
PureScript --tailwindcss-> style.css
・本番
PureScript --spago(ビルド)-> CommonJS --spago(バンドル)-> index.js
PureScript --tailwindcss-> style.css
開発中はバンドルにwebpackを用いていますが，これは高速化のため．(spagoのバンドルではデッドコード排除やFFIのチェック(？)などが入っていて，遅い．逆に本番ではspagoを使ったほうが良いはず)
更にtailwindもJITを用いて高速化すると，前までかかっていた時間が嘘のように素早く変更を反映できました．(大体4,5秒ぐらい？) これがかなり大きくて，例えばバンドル中は(おま環かもしれないが)それに処理が回って補完が効かなかったりするのでかなり快適になります．良かった・
※git管理していないvscodeの設定も重要で
...
"tailwindCSS.includeLanguages": {
"purs": "html",
"purescript": "html",
},
"tailwindCSS.emmetCompletions": true,
"[purescript]": {
"editor.formatOnSave":false,
"editor.fontLigatures": true,
"editor.defaultFormatter": "mvakula.vscode-purty",
"editor.tabSize": 2,
"tailwindCSS.experimental.classRegex": [
"\"([^\"]*)\""
],
"editor.quickSuggestions": {
"strings": true
},
},
...
を書いておく．こうしないとtailwindの補完が効きません．これでかなり詰まってました
追記 こんな感じのをpackage.jsonのscriptに追加
"scripts": { "deploy:spago": "npx spago bundle-app --main Main --to './public/index.js'", "deploy:tailwind": "npx tailwindcss -i ./src/tailwind.css -o ./public/style.css", "watch:tailwind": "npx tailwindcss -i ./src/tailwind.css -o ./public/style.css -w", "watch:spago": "npx spago build --watch", "watch:webpack-server": "npx webpack-dev-server", "watch": "npx concurrently \"npm run watch:tailwind\" \"npm run watch:webpack-server\"", "deploy": "npm run deploy:tailwind && npm run deploy:spago" },
