Parcel 使ってみた

Parcel でWebアプリをビルドすると設定で疲弊しない

Transcript

1. Parcel 使ってみた 2023-01-27 LTワークショップ Ryoh Kunihiro (@rkunihiro) ゼロコンフィグを謳うビルドツール
2. 自己紹介
3. アジェンダ - イマドキのWeb開発ではビルドが必要 - ビルド設定だけで疲弊していませんか？ - Parcelを使うと - アプリ開発に集中できる
4. イマドキのWeb開発ではビルドが必要 - TypeScript - JSX - Sass / LESS - minify - バンドル - ファイル名変換 - ファイル分割 - etc…
5. ビルド設定だけで疲弊していませんか？ - おそらくいちばん有名なビルドツール webpack では… https://webpack.js.org/
6. ビルド設定だけで疲弊していませんか？ たくさんのパッケージを追加する必要 - webpack本体 - ローダー - TypeScript,Sass,CSS,... - プラグイン - HTML生成,minify,... - 開発サーバー - etc…
7. ビルド設定だけで疲弊していませんか？ 複雑な設定ファイルを書く必要 - ファイル名変換の設定 - ローダの適用ルール - プラグインの追加とオプション - minify設定 - ファイル分割の設定 - 開発サーバの設定 - etc…
8. ビルド設定だけで疲弊していませんか？ アプリ本体のコードを書く前に 疲れてしまう
9. Parcelを使うと https://parceljs.org/
10. Parcelを使うと - ツールのインストールはとりあえずこれだけ $ npm i -D parcel ※必要なプラグイン等は自動で追加される
11. Parcelを使うと 設定ファイルはほぼ不要 - 任意のプラグインを適用したい場合などに .parcelrc を使用できる
12. Parcelを使うと HTMLが起点 ソースファイルで指定
13. Parcelを使うと 使い方もシンプル ・開発サーバの起動(watch実行) ・商用ビルド npx parcel serve ‘src/index.html’ npx parcel build ‘src/index.html’
14. アプリ開発に集中できる - 実験的なコードを試す環境をサッと作れる - サンプルコードとして配布する際のファイル構成がきれいになる
15. ほかにも JSライブラリのビルドにも使えたり、画像の変換、 通常ではimportできないファイル(YAMLやGraphQL)をimportできるようにしてくれたり と多機能。 興味を持たれた方はぜひ試してみてください。
16. ご清聴ありがとうございました