JavaScript
TypeScript
es2015
parcel

設定ファイル不要のParcelでTypeScriptをコンパイル・バンドルしたら拍子抜けするほど簡単だった

1ファイルのTypeScriptをコンパイルするには、typescriptモジュールがあれば可能ですが、モジュールを用いて複数ファイルをバンドルするとなると、webpack module bundlerBrowserifyが必要です。いずれも独自の設定ファイルが必要で、その学習コストは低くありません。

最近リリースされた📦 Parcelを使うと、webpackのような独自の設定ファイルを使うことなく、TypeScriptのバンドルが拍子抜けするほど簡単になります。Parcelとは、設定ファイルが不要で高速なウェブアプリケーションのバンドラーツールで、記事「webpack時代の終わりとparcel時代のはじまり - Qiita」でも話題になっています。

本エントリーでは、Parcelを用いたTypeScriptのコンパイル方法と、注意すべき点について紹介します。

環境準備

コマンド
npm init -y

続いて、parcelを次のコマンドでインストールします。

コマンド
npm i -D parcel-bundler

以上で、Parcelの環境設定は終了です。

TypeScriptのコンパイル

今回は、次のようなTypeScriptファイルをのコンパイルを行います。

Main.ts
import {SubModule} from "./sub/SubModule";

class Main {
  constructor() {
    console.log("Main Class Works!");
    new SubModule();
  }
}

window.addEventListener("DOMContentLoaded", () => new Main());
sub/SubModule.ts
export class SubModule {
  constructor() {
    console.log("Sub Class Works!");
  }
}

typescriptモジュールのインストール

TypeScriptのコンパイルには、webpackの場合と同じく、typescriptモジュールのインストールが必要です。

コマンド
npm i -D typescript

エントリーポイントの準備

Parcelでは、CSSやJavaScript、画像などを、エントリーポイントとなるJavaScriptで読み込んで使用します。任意の名前のJavaScriptファイル(今回はapp.jsとしました)を作り、importでMain.tsファイルを読み込みます。

app.js
import "./script/Main.ts";

HTMLファイルで、app.jsを読み込みます。

index.html
<html>
<body>
<script src="app.js"></script>
</body>
</html>

これだけでTypeScriptのコンパイル準備は完了します。

コンパイルと自動リロードの開始

次のコマンドで、TypeScriptのコンパイルが開始。

npx parcel index.html

localhost:1234でローカルサーバーの起動と自動リロードが行われます。

image.png

ちなみにtsconfig.jsonがあれば、そちらの設定を読みにいきます。ただし、ソースマップ設定やインプット、アウトプットファイル名は指定できません。

ファイルはdistフォルダへ出力される

ファイルはdistフォルダへ出力されます。JavaScriptの中身を見ると、TypeScriptがコンパイルされ、モジュールがバンドルされているのがわかります。

image.png

複数ファイルのバンドルを試してみた

試しに下記のような複数ファイルのバンドルを試してみましたが、バンドルに関しては特に問題ありません。

ローカルサーバーが自動で起動するので、表示確認しながらの作業も楽です。

IE 11でも動作する

(2017/12/13追記) 出力コードがIE 11でも動作するようになりました。IE 11で動作しないというのは致命的なデメリットだったので、実用性が向上した形です。

ソースマップも使える

(2018/02/28追記) v1.5.0へのアップデートにより、ソースマップにも対応しました。

image.png

▲ Google Chromeでソースマップを確認している様子

Tree Shakingに対応

(2018/06/15追記) v1.9でTree Shakingに対応しました。次の資料がわかりやすいでしょう。

今後の更新が楽しみなツール

Parcelは設定ファイルがないゆえにカスタマイズ性に欠けるというデメリットはあります。とはいえ、設定ファイル不要でコンパイルができるため、面倒な環境構築から開放されるのは大きなメリットと言えます。今後のさらなる更新が楽しみです。

ちなみに、webpack 4ではparcelに刺激を受けてかゼロコンフィグモードが追加され、webackの豊富なカスタマイズ性を維持しつつ、シンプルなバンドルも可能になりました。

参考記事:「設定ファイル不要のwebpack 4で、BabelやTypeScriptのゼロコンフィグのビルド環境を作ってみる

面倒な設定なしに手軽に環境構築ができるのは事実なので、個人案件や小規模案件で実験的に導入しつつ、様子を見るのがよいでしょう。

ParcelによるSassのコンパイル方法についてはこちらの記事をどうぞ。

また、webpackやGulpによるSassのコンパイル方法ついてはICS MEDIAやSchooで詳しく解説しているので、あわせて参照ください。