あぁ

サクッと画面がみたい、TS書きたい、動かしたい。。。
そんな時にParcelが便利だったのでその感動を残す。。。

Parcelとは

コンフィグレスを謳ったバンドラー。公式
tsconfigとか、webpack.configとかすっ飛ばしてシンプルに動かせる。

見てもらうのが早い。
適当にディレクトリを切って、npm init します(あ、nodejs、npmは入ってる前提です)。

mkdir parcel_hoge
npm init -y

Parcelをインストールします。

npm i -D parcel-bundler

devDependenciesに parcel-bundler を入れます。

簡単にディレクトリ構成を整えます。今回は下記のようにしましたがお好みで。

parcel_hoge/
　├ node_modules/
　├ src/
　│　└ index.html
　│　└ scripts/
　│　    └ index.ts
　│　    └ sub.ts
　└ package.json

それぞれの中身はこんな感じ

index.ts

// subから受け取ったmessageを画面に描画
import { message } from "./sub";
document.write(message);

sub.ts

// messageとしてmomentを渡している
import moment from "moment";
export const message = moment();

index.html

<!-- ここでTSを直接指定していることに地味に驚く -->
<script src="scripts/index.ts">

package.jsonに加筆します。
globalにparcelがあれば直接叩いてもいいです。

package.json抜粋

  "scripts": {
    "web": "parcel ./src/index.html",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

さて、お立ち会い。
コマンドを叩くと、必要なモジュールのインストールが行われ（！）、localhostにサーバーが立ち上がります。

ブラウザで確認すると。。。

動いている！

package.jsonを確認すると。。。

使ったモジュールがインストールされてる！

っとまぁ、これといった設定ファイル無しでも
さらには必要なパッケージのインストールを事前に行わなくても
TS→JSへのトランスパイルやモジュールのバンドルを賢く捌いてくれます！

エントリーポイントはHTML以外でもOK
nodejsらしくサーバーサイド実装する場合は注意が必要。
下記のようにビルド時に --target node オプションを指定しないと、node向けのビルドになってくれず困ったことになる（fsすらうまく動かず苦労しました。。。)。

parcel build src/scripts/index.ts --target node