parcel ビルドをサブディレクトリに置くときのソースマップ
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 1
◆ ソースマップの場所が絶対パスでルート固定になってる
◆ public-url 使っても base タグの相対パスと被っておかしくなる
◆ public-url でカレントフォルダの 「.」 を指定するとうまくいく
◆ public-url 使っても base タグの相対パスと被っておかしくなる
◆ public-url でカレントフォルダの 「.」 を指定するとうまくいく
前提
parcel でビルドしたファイルをサブディレクトリに置きたいことがあります「/sub/」 フォルダに置いて /sub/xxx, /sub/yyy などのアクセスがすべて /sub/index.html にくるようにします
index.html には
<base href="/sub"/>
を書いて /sub/foo/bar/baz でも /sub/ にいるように扱わせます
parcel
parcel build index.js
を実行したときのソースマップは
//# sourceMappingURL=/index.map
絶対パスになっています
なので /sub/index.js に置いても /index.map を見ようとして見つからないエラーになります
公開ディレクトリのパスを設定できる public-url オプションがあるので使ってみると
parcel build index.js --public-url sub
//# sourceMappingURL=sub/index.map
これだと base タグが有効なので /sub/sub/index.map を見ようとして見つからないエラーになります
場所は base タグに任せて単純に自分からの相対パスにすればうまくいきます
parcel build index.js --public-url .
//# sourceMappingURL=index.map
これなら /sub/index.map をみようとしてうまくいきます
ところで ソースマップってやっぱりあまり使えないですよね
devtools でソースの場所にジャンプしたら関係ない行だったり 全部が同じ場所になってたり ステップ実行がうまく動かなかったり……
ソースマップ使わず開発時は minify オフにして直接バンドル済みのファイルをみてたほうがはるかに楽でした
ソースマップって使われだして結構立ちますしそろそろ安定してそうには思ったのですがそうでもないみたいです