Node.js サーバーサイド開発にParcelを使う

webpack時代の終わりとparcel時代のはじまり - Qiita

Parcelがバズってから1年以上経ちましたが、依然プロダクション利用の第一選択肢はwebpackという雰囲気ですね。
それでもゼロコンフィグのコンセプトは魅力的ですし、十分実用に耐える完成度のツールだと思うのでちょっと紹介します。

検索してみるとフロントエンドの利用例はよく出てくるのですが、Node.jsのサーバーサイドの例はあまりないと思ったのでそちらを紹介しようと思います。
ついでにTypeScriptで書いてみます。

私の環境ですが、

• Ubuntu 18.04
• Node.js 8.11.4
• npm 5.6.0
• yarn 1.13.0

という感じです。

expressを例にします。

完成版は下記に上げておきます。

dyoshikawa/express-ts-parcel-example

まず、適当にディレクトリを掘ってyarn initします。

mkdir express-ts-parcel-example
cd express-ts-parcel-example
yarn init

expressとexpressの型定義ファイル、Parcel、TypeScriptトランスパイラを導入します。

yarn add express
yarn add -D @types/express parcel-bundler typescript

tsconfig.jsonを生成します。

yarn run tsc --init

ここでtsconfig.jsonのlibに "esnext", "dom" を追記しておくことでPromiseやconsole.logを使えるようにします。

package.jsonにscriptsを追加します。

ポイントは --target node オプションで、これを指定することでNode.js向けのトランスパイルを行ってくれます。

あとはコードを書くだけですね。

Express の「Hello World」の例

ドキュメントからHello Worldコードを拝借して、server.tsとして作成。
TypeScriptに対応するように書き換えます。

yarn dev でトランスパイルした状態で yarn start を叩くとサーバが起動しますのでブラウザからHelloWorldできているかを確認します。

TypeScriptを使用する際の注意点として、Parcelはトランスパイルはしてくれますが型チェックは行ってくれないです（型が間違っていてもエラーが出ない）。

そのため、IDEの型チェックを見る、 tsc --noEmit を行うなどで代用する必要があります。
ここは割り切りですね。

参考になれば幸いです。