ビルドツール素振り(Parcel編)
Parcel を使ったビルド設定をやってみる
例によって、 ヌケニンフォルダ から始めます。(詳しくは こちらの記事 を参照ください。)
2021 年 4 月現在 Parcel v2 が開発中(beta)なのですが、今回は v1 で試しました。
まず、 Parcel 本体をインストールします。
$ yarn add -D parcel-bundler
Parcel は、 index.html を起点に必要な js を探し出してビルドを行うため、予め index.html に <script> タグを埋め込んでおく必要があります。
<div id="root"></div>
+ <script src="../src/index.tsx"></script>
package.json 内の script を書き換えます。
"scripts": {
- "start": "echo start",
- "build": "echo build",
+ "start": "parcel public/index.html --open",
+ "build": "parcel build public/index.html",
"test": "echo test"
},
これで yarn start すると、正常に CRA と同じ結果を表示できるのですが、コンソールを見ると以下のようなエラーが発生しています。
これは、 Parcel が index.html 内の以下の記述を、
<link rel="manifest" href="manifest.json" />
ビルド時に以下のように書き換えてしまうために起こります。
<link rel="manifest" href="/manifest.js" />
マニフェストファイルは本来 .webmanifest 拡張子のファイルですが、各種ブラウザは .json にも対応しています。
さらに、 Parcel は .webmanifest の読み込みもサポートしている(https://parceljs.org/webManifest.html)ようです。(ドキュメント空だけど... 🤔)
従って manifest.webmanifest ファイルを manifest.json に変更し、 index.html 内の記述も同様に変更することで、問題を回避できます。
このマニフェストファイル読み込み時のエラーに関しては、以下の issue を参考にしました。
Parcel は特に設定の必要なくよしなにビルドを行ってくれて楽ですが、ある程度どのように動作するか知っていかないと、エラー時の原因の切り分けが難しいですね・・・。
ここまでの結果は下記に置いています。
引き続き、他のビルドツールの記事も書いていきます！