ウェブ開発ではSass、Babel、TypeScriptなどの言語のコンパイルや、出力ファイルの最適化、ローカルサーバーの起動などさまざまな作業が求められます。現在は、それらの作業を自動化するwebpackGulp.jsがよく使われています。

webpackにはwebpack.config.js、Gulp.jsにはgulpfile.jsという設定ファイルがそれぞれ必要で、両ツールともその使用方法を覚える学習コストがあります。

▼ webpack.config.jsの例

module.exports = {
  entry: `./src/index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: 'main.js'
  },
};

Parcelパーセルというツールを使うと、webpackやGulp.jsのような独自の設定ファイルを使うことなく、各種言語のコンパイルやバンドルができるようになります。バンドルとは、複数のファイルを1つにまとめることを指します。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドルツール。次のようなことが可能です。

  • Sassのコンパイル
  • Autoprefixerによるベンダープレフィックスの自動付与
  • ソースマップの作成
  • モジュールのバンドル
  • モジュールのTreeShaking
  • TypeScriptのコンパイル
  • Babelのコンパイル
  • ビルドファイルのminify
  • ローカルサーバーの起動、自動リロード

本エントリーではParcelの入門編として次の内容を解説します。

  • Sassのコンパイル方法
  • ローカルサーバーの起動・自動リロード方法
  • Autoprefixとの連携方法
  • 納品ファイルの作成方法
  • webpackとの使い分け

環境準備

今回はプロジェクトフォルダー(ウェブサイトのファイル一式が保存されるフォルダー)として、myprojectというフォルダーを使う前提で解説します。コマンドラインでmyprojectフォルダーに移動します(※1)。

▼ macOSでのフォルダーの移動のコマンド

cd /Users/★★★/myproject

▼ Windowsでのフォルダーの移動のコマンド

cd C:¥Users¥★★★¥myproject

以下のnpmコマンドで初期化します。

npm init -y

完了すると、package.jsonファイルがプロジェクトフォルダー内に作られます。

続いて、Parcelを次のコマンドでインストールします(※2)。

▼ コマンド

npm i -D parcel

以上でParcelの環境設定は終了です。Parcelのための設定ファイルを作成する必要はありません。

※1 フォルダーの移動方法やNode.jsのインストールが不明であれば、記事「絶対つまずかないGulp入門」の1ページ目を参照ください。

※2 -y-Dは、npmコマンドを扱う際の便利なショートカットです。詳しくは記事「webpackやGulp.jsを使う時に覚えて幸せになったnpmの便利な使い方」を参照ください。

Sassのコンパイル

style.scssというSassファイルのコンパイルを通して、Parcelの使い方を学びましょう。style.scssの内容は次のとおりで、Sass特有の変数やネストを使っています。

▼ style.scss

$redColor: #eA5b54;

.container {
  .box {
     background-color: $redColor;
  }
}

Sassファイルをコンパイルするには次のコマンドを使います。npxについて不明であれば記事「『npx』でローカルパッケージを手軽に実行しよう」を参照ください。

▼ コマンド

npx parcel コンパイルしたいファイル名

style.scssをコンパイルするには次のとおりです。

▼ コマンド

npx parcel style.scss

プロジェクトフォルダー内にdistフォルダーが生成され、コンパイル後のCSSファイルが生成されているのがわかります。

dist/style.cssファイルの中身

.container .box {
  color: #eA5b54;
}

Sassファイルの更新は自動で反映される

Sassファイルを更新すると、Parcelは自動で再コンパイルを行い、distフォルダーに出力します。ParcelのHMR(Hot Module Replacement)機能によるものです。Gulp.jsで同様のことを実現するには自前の設定が必要でしたが、Parcelは最初からこの機能が備わっています。

参考記事「Hot Module Replacement – Parcel

なお、ファイルの監視を終了する場合は、コマンドラインで[Ctrl]と[C]キーを同時に押します。

不足しているモジュールは自動でインストールされる

Sassのコンパイルコマンドは、初回実行時はやや時間がかかります。Sassのコンパイルに必要なnode-sassモジュールを、Parcelが自動でインストールしているためです。Parcelは必要なモジュールがnode_modulesフォルダーに存在しない場合、それをインストールしようとする仕組みがあります。開発者のモジュールインストールの負担を減らす便利な機能です。

参考記事「Automagically installed dependencies – Parcel

出力フォルダーを変更したい場合

初期設定ではコンパイル後のファイルはdistフォルダーに格納されます。出力フォルダーを変更するには、コマンドに-d 出力したいフォルダー名を設定します。たとえば、publicフォルダーに格納するコードを紹介します。

▼ コマンド

npx parcel style.scss -d public

実行すると、publicフォルダーにコンパイル後のCSSファイルが格納されます。

次のページではParcelで開発サーバーを立ち上げる方法と、Autoprefixerを使ったIE 11のCSS Grid対応方法を紹介します。