Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Parcel 使ってみた
Search
rkunihiro
January 27, 2023
Programming
0
34
Parcel 使ってみた
Parcel でWebアプリをビルドすると設定で疲弊しない
rkunihiro
January 27, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
Going beyond Apache Parquet's default settings
xhochy
0
130
"config" ってなんだ? / What is "config"?
okashoi
0
330
Ruby Function Composition
bkuhlmann
1
340
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
ServerAction で Progressive Enhancement はどこまで頑張れるか? / progressive-enhancement-with-server-action
takefumiyoshii
6
430
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
860
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
100
2 週間で Twitter Bot を作ってみた
contour_gara
0
780
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
130
Goのエラースタックトレースの歴史と今後
sonatard
10
1.8k
Polars入門
daikikatsuragawa
1
180
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Become a Pro
speakerdeck
PRO
13
4.6k
Producing Creativity
orderedlist
PRO
338
39k
GitHub's CSS Performance
jonrohan
1025
450k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Making Projects Easy
brettharned
109
5.5k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Side Projects
sachag
451
41k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Transcript
Parcel 使ってみた 2023-01-27 LTワークショップ Ryoh Kunihiro (@rkunihiro) ゼロコンフィグを謳うビルドツール
自己紹介
アジェンダ - イマドキのWeb開発ではビルドが必要 - ビルド設定だけで疲弊していませんか? - Parcelを使うと - アプリ開発に集中できる
イマドキのWeb開発ではビルドが必要 - TypeScript - JSX - Sass / LESS -
minify - バンドル - ファイル名変換 - ファイル分割 - etc…
ビルド設定だけで疲弊していませんか? - おそらくいちばん有名なビルドツール webpack では… https://webpack.js.org/
ビルド設定だけで疲弊していませんか? たくさんのパッケージを追加する必要 - webpack本体 - ローダー - TypeScript,Sass,CSS,... - プラグイン
- HTML生成,minify,... - 開発サーバー - etc…
ビルド設定だけで疲弊していませんか? 複雑な設定ファイルを書く必要 - ファイル名変換の設定 - ローダの適用ルール - プラグインの追加とオプション - minify設定
- ファイル分割の設定 - 開発サーバの設定 - etc…
ビルド設定だけで疲弊していませんか? アプリ本体のコードを書く前に 疲れてしまう
Parcelを使うと https://parceljs.org/
Parcelを使うと - ツールのインストールはとりあえずこれだけ $ npm i -D parcel ※必要なプラグイン等は自動で追加される
Parcelを使うと 設定ファイルはほぼ不要 - 任意のプラグインを適用したい場合などに .parcelrc を使用できる
Parcelを使うと HTMLが起点 ソースファイルで指定
Parcelを使うと 使い方もシンプル ・開発サーバの起動(watch実行) ・商用ビルド npx parcel serve ‘src/index.html’ npx parcel
build ‘src/index.html’
アプリ開発に集中できる - 実験的なコードを試す環境をサッと作れる - サンプルコードとして配布する際のファイル構成がきれいになる
ほかにも JSライブラリのビルドにも使えたり、画像の変換、 通常ではimportできないファイル(YAMLやGraphQL)をimportできるようにしてくれたり と多機能。 興味を持たれた方はぜひ試してみてください。
ご清聴ありがとうございました