本ブログ更新時にトラブルが起きた際の対処メモ。GatsbyJSのパッケージ置き換え方法について。
1) 発端 - デバッグ/ビルド時に警告が出るように
本ブログはGatsbyJSでビルドしたものをFirebase Hostingにデプロイしている。Blog機能を一部改修しデバッグしたところ以下のエラーが出るようになった。
ENOENT: no such file or directory, stat '.cache/google-fonts//fonts'調べてみるとGoogle Fontsをプリフェッチする機能が最新のGatsbyJSに追随できていないらしい。
追随できていないパッケージ、
gatsby-plugin-prefetch-google-fonts | Gatsby
の設定を流用できるパッケージを探したところ、
gatsby-plugin-webfonts | Gatsby
を置き換えてみる。
2) パッケージのインストール&アンインストール
npm で導入したGatsbyJS内の不要パッケージをアンインストール後、必要パッケージをインストールする。
ブログが格納されているフォルダに移動後パッケージをパッケージからアンインストールする。
npm uninstall gatsby-plugin-prefetch-google-fonts --save続いて置き換え用パッケージをインストールする。
npm install gatsby-plugin-webfonts --save--save パラメータをつけることでpackage.json にインストール対象が記憶される。
インストールしたバージョンでバグフィックスしたマイナーアップde-toがある場合、nmpから警告が出る場合がある。npm audit fix を呼び出してバグフィックを取り込む。
npm audit fix3) GatsbyJS設定の編集
GatsbyJS設定ファイル(gatsby-config.js)のGoogleWebFont設定内容を書き換える。書き換えエディタはVSCodeを使用。
元の設定、
{
resolve: `gatsby-plugin-prefetch-google-fonts`,
options: {
fonts: [
{
family: `Montserrat`,
subsets: [`latin`],
variants: [`300`, `400`, `500`, `600`, `700`, `900`]
},
{
family: `Marck Script`,
subsets: [`latin`],
variants: [`400`]
},
{
family: `Dancing Script`,
subsets: [`latin`],
variants: [`400`, `500`, `600`, `700`]
}
],
},
},の箇所を書き換える
{
resolve: `gatsby-plugin-webfonts`,
options: {
fonts: {
google: [
{
family: `Montserrat`,
subsets: [`latin`],
variants: [`300`, `400`, `500`, `600`, `700`, `900`]
},
{
family: `Marck Script`,
subsets: [`latin`],
variants: [`400`]
},
{
family: `Dancing Script`,
subsets: [`latin`],
variants: [`400`, `500`, `600`, `700`]
}
],
},
},
},4) GatsbyJS動作確認&ビルド
動作確認はgatsby develop で行う。
gatsby develop上記コマンドでlocalhost:8080 で動作を確認できる。
動作確認後deploy向けのビルドで問題なければパッケージの置き換え完了となる。
gatsby build
