Zenn
📦

設定ファイルなしのTypeScriptモジュールバンドラparcelを使ってみたらすごく簡単だった

2024/01/17に公開
TypeScript
parcel
tech

はじめに

モジュールバンドラといえば webpack や rollup などが人気な印象ですね。
すごく便利なのは確かなのですが、たまに思ってしまうのが「設定ファイルにどれだけ時間かければいいんだよ。。」という悩みです。
設定ファイルを変更する必要があるとき、複雑なことをしようとすると時間がかかります。

そこでこの記事では parcel というモジュールバンドラを使ってみます。
parcel は設定ファイルなしという特徴があります。
ちょっとした開発をしたいだけの時にぴったりだと思います。

この記事では簡単な例として、TypeScriptのファイルを2つ使って、HTMLで次の画像のような表示ができるところまで紹介します。

記事よりもソースコードを見たい方はこちらから。
クローンする場合はブランチを feature/parsel-min にするのをお忘れなく。
https://github.com/shogonir/webgpu-ts/tree/feature/parcel-min

プロジェクト作成

まずはプロジェクトを作成しましょう。
今回は sample-project という名前のプロジェクトにします。

mkdir sample-project
cd sample-project
git init

.gitignore は最低限以下のようにしておけば、依存性とキャッシュとビルド成果物を無視できます。

.gitignore
.parcel-cache
dist
node_modules

parcelを導入する

mkdir sample-project
cd sample-project
npm init

npm init を実行すると色々きかれるので、必要な場合は入力しましょう。
とりあえず試したいだけならEnterを連打で大丈夫です。

次に parcel をインストールしましょう。

npm install --save-dev parcel

次に実際に動かしてみるためにTypeScriptのファイルとHTMLを準備します。
用意するファイルとフォルダは次のようにしてください。

sample-project
└─src
  ├─scripts
  │ ├─add.ts
  │ └─index.ts
  └─index.html

作成したファイルの内容は以下のようにしてください。

add.ts
const add = (a: number, b: number): number => {
  return a + b;
};

export {add};

add.ts では2つの数値の和を求める関数を定義します。
複数ファイルの動作確認をしたいだけなので、これで十分ですね。

index.ts
import { add } from "./add";

// 1+2を計算
const three = add(1, 2);

// HTMLに計算結果を表示
const p = document.createElement('p');
p.innerText = `Hello, world! ${three}`;
document.body.appendChild(p);

index.ts では先ほど定義した関数を使って 1+2=3 を計算し、画面に表示します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>example</title>
    <script src="scripts/index.ts" type="module"></script>
  </head>
  <body>
  </body>
</html>

index.html では index.ts を参照します。

動作確認

まずはよく使うコマンドを登録します。
package.json の scripts の部分を修正しましょう。

package.json
{
  // 中略
  "scripts": {
    "watch": "npm exec parcel src/index.html --open"
  },
  // 中略
}

ではついに動かしてみましょう。

npm run watch

次のような出力がターミナルに表示されたら成功です。

> npm run watch

> sample-project@1.0.0 watch
> npm exec parcel src/index.html --open

Server running at http://localhost:1234
✨ Built in 96ms

ブラウザから、ターミナルに表示されているURL http://localhost:1234 にアクセスしてみましょう。
ポート番号1234が占有されている場合は、別のポート番号が表示されていると思いますので注意してください。
冒頭で紹介したような表示になっていれば成功です。

さいごに

というわけでこの記事ではparcelを使った最小限のデモを作ってみました。
使う前は「本当に設定ファイルなしで大丈夫なの？」と思っていましたが、自分はプライベートでWebGLやWebGPUを試してみたいときなどに重宝しています。
今のところまだ parcel で困ったことはないので、これからも使っていきたいと思っています。

みなさんも設定ファイルに疲れたら parcel を試してみてください。

Discussion