2023-01-07 投稿

Parcelでサクッとフロントエンド開発環境を手に入れる

思いついたアイデアをブラウザ上にJavaScriptを使って表現したい。 でも本格的に開発するならGulpだWebpackだと用意するのが面倒。そんな時にParcelが役立ちます。

手っ取り早くブラウザで開発するならParcel

Parcelは、HTML、CSS(Sass)、JSXなどメジャーなオンブラウザ技術での開発を 簡単に始められるパッケージです。Webサーバも含まれており、自動的に変更を検知しリロードしてくれる優れものです。

Parcel

npmまたはyarnが使えるローカル環境であれば、すぐに始められます。

1#npmの場合
2npm init
3npm install --save-dev parcel
4npx parcel src/index.html
5
6#yarnの場合
7yarn init
8yarn add --dev parcel
9yarn parcel src/index.html

Webサーバが起動するので、localhost:1234にアクセスすると指定したHTML(ここではsrc/index.html)が表示されます。