← Blog一覧へ

2023-01-07

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

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

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

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

Parcel

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

#npmの場合
npm init
npm install --save-dev parcel
npx parcel src/index.html

#yarnの場合
yarn init
yarn add --dev parcel
yarn parcel src/index.html

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