【JavaScript】parcelを用いたお手軽開発環境構築

JavaScript

こんにちは、しきゆらです。
今回は、以前に少しだけ触れたparcelを使って開発環境を構築してみました。
また、個人的に以前まで疑問だった、JSとSCSSを用いた場合にどう管理するのか問題を解決することができたので合わせてメモしておきます。

parcelに関しては、以前少しだけ記事にしたことがありました。
=> 以前の記事：【JS】フロントエンド界隈で話題のparcelことはじめ
以前まではWebpackを利用していましたが、難解な設定や多様なプラグイン等、気軽に使うにはハードルが高い状況でした。
そんな中で、parcelは面倒で難解な設定ファイルを作成せずとも、自動で関連するファイルを監視し、変更があれば適宜処理を走らせてくれます。

そんなparcelさんですが、実際にparcelを使ったものづくりをするときにどうすればいいのかわからない部分がありました。
それは、SCSSを使った場合の読み込み方です。
HTMLからSCSSを読み込んでも、ブラウザは反映してくれません。
それをどう読み込めるようにするのかが疑問でした。
これを解決することができたので、合わせて記録しておきます。

 

ファイル構成

今回は、以下のようなファイル構成をしているとします。

  src/
   ├── package.json
   ├── js/
   │   ├── hoge.js
   │   └── main.js
   ├── css/
   │   └── index.css
   └── index.html

ファイルの中身は、こんな感じ。
まずは、HTMLファイルです。

<!-- index.htmlの一部 -->
 <body>
   hoge
   <script src="js/main.js">
 </body>

main.jsには、index.htmlに対する処理が書いてあるとします。

 

parcelを用いた開発環境の準備

parcelさんは、基本的にインストールするだけで利用することができます。
面倒な設定も何も必要ありません。
以下のコマンドでインストールできます。

yarn add -D parcel

インストールが終わったら、監視対象としたいファイルを指定してあげれば、勝手に動いてくれます。

yarn run parcel ファイル名

※
インストール時に、グローバル環境を指定した場合は「yarn run」は必要なし

 

開発環境の使い方

さて、私の疑問は「HTMLからSCSSなどをどう読み込むようにすればparcelで管理ができるのか」ということでした。
この疑問の解決方法は、実はとてもシンプル。
しかも、Webpackでも同様の方法で管理していたようです。

webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。

なんとなくで理解しないWebpackのCSS周辺 – Qiita

ということで、全てをJSとして扱うことで管理するようです。

私は、WebpackをRailsと併用していたので、SCSSはRailsから直接扱っていたためWebpackはJSのみを扱っていました。
そのためSCSSに関してあまり気にしなくても良かったのですね。

parcelさんでJSも(S)CSSも扱うには、全てをJSとして扱えば良いとのこと。
ファイル構成の中のCSSをSCSSに置き換えたとして、main.jsに以下のコードを書き込むとSCSSをJSが読み込んでくれます。

import "../scss/index.scss";

これにて、parcelさんはHTMLからmain.jsを参照し、main.jsからSCSSを参照できるようになりますね。
これだけで、index.htmlに関係する全てのファイル(JS/CSS)を一括で管理することができます。
とても便利。

 

きれいな使い方はわかりませんが、HTMLはmain.jsのような1つのファイルを読み込むようにし、main.jsからJSとCSSを読み込むような使い方をすると良さそうだな、と思いました。
図にすると以下のような感じですかね。
tree.001.png

実際はどう利用しているんでしょうか。
Githubを漁ってみようかな。

 

まとめ

今回は、parcelを使った開発環境の作り方と、複数の要素を組み合わせてparcelで管理する方法をまとめました。
parcelは難しい設定がなくても、いい感じに処理してくれるので、最初のハードルがとても低くて使いやすいです。
初めて使う場合にはとても頼りがいがあるものですね。
ぜひ、使ってみてはいかがでしょうか。

parcelの公式サイトはこちら。 <- 日本語化されているので、読みやすい！
Githubはこちら。

今回は、ここまで。
おわり

Posted by しきゆら