gatsby-remark-relative-imagesとは

danielmahon/gatsby-remark-relative-images: Convert markdown image src(s) to be relative for gatsby-remark-images.

あまり解説しているサイトがないのだが、Markdown形式のデータを扱う場合内部のimgタグによる画像を相対パスにすることができるプラグイン。

これがないと私のBLOG記事は管理が面倒になるので困る。

今回これがメジャーアップデートされたので更新する。

毎度ながら安易にメジャーアップデートを行うと内部関数の呼び出し方法が変更されている可能性が高く動かなくなることが多い。

というわけでアップデートのためこの記事を執筆している。

0.x系から2.x系への変更点

公式によるとfmImagesToRelative()という関数が廃止。

使う必要がくなった、とのこと。

アップグレード

まず次のコマンドで現在のpackage.jsonに書かれたライブラリで古いものを列挙

npm outdated

//結果
Package                          Current  Wanted  Latest  Location
gatsby-remark-relative-images      0.3.0   0.3.0   2.0.2  nazono_gijutu_kenkyu_bu

0.3.0が現在インストールされているもの。最新は2.0.2

メジャーアップデートは手動で更新する必要があるのでpackage.jsonに記述されている箇所を変更

//次になっているところを
"gatsby-remark-relative-images": "^0.3.0", 

//次に変更
"gatsby-remark-relative-images": "^2.0.2", 

保存して次を実行

npm install

補足：ncuは今回使わない

調べた所ncuは個別アップグレードに対応していなさそうなので使うのをやめた。

gatsby-node.jsを変更

もしかしたら環境によって変わるかもしれないがgatsby-node.jsに一行だけ次があるのでこれを消去する。

fmImagesToRelative(node) // convert image paths for gatsby images

※これを消去しないでnpm run devなどを行うとものすごい量のエラーが出る。

完了

この後npm run devおよびnpm run buildで動作確認を行った。

今の所問題なく動作している。