Storybook v7 は `next/font` をどのように扱うのか
snaka以下の scrap で、next/font のフォントが使えない問題について調べていたが、深く調べる必要がありそうだったので別スレにした
前提
- Storybook で SWC は利用していない
snakaざっくりとまとめ
@storybook/nextjs では以下のことが行われていた。
- Babel によって、ソースコードの
import部分の書き換えが行われる上記が以下のようにimport { xxx } from 'next/font/google'import { xxx } from 'storybook-nextjs-font-loader?{ ... }!next/font/google' - Webpack によって、上記の
importの箇所でstorybookNextjsFontLoader()が呼び出される
-
getFontFaceDeclarations()で CSS の@font-faceの定義が生成される
snaka以下は調査のタイムライン
next/font/google というキーワードでそれらしい箇所を探る
それっぽい関数 storybookNextjsFontLoader(this: any) があった
snaka名前から推測するに storybook-nextjs-font-loader を webpack の設定として利用している箇所があるはず
snakaconfigureNextFont() という関数があった
snakawebpackFinal() で呼び出している
snakaSWC は使っていないので、webpack config に以下の設定が追加されるイメージ?
{
resolveLoader: {
alias: {
'storybook-nextjs-font-loader': '@storybook/nextjs/font/webpack/loader/storybook-nextjs-font-loader'
}
}
}
webpack いまだによくわかっていない
resolveLoader.alias は storybook-nextjs-font-loader という名前で @storybook/nextjs/font/webpack/loader/storybook-nextjs-font-loader を指し示すことができるようにするための設定
snakaLoader ってなんだっけ?
ファイルを取り込むときに事前処理 ( ES2015 をどの処理系でも動作する ES5 に翻訳するなど ) を行う仕組み。
snakaこっちのページのほうがわかりやすい
Loader は module.rules によって、どのファイルに対してどの Loader を適用するかを指定されている。
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
],
},
};
あるいは Inline で import で loader-name! のように直接指定する方法もある
import Styles from 'style-loader!css-loader?modules!./styles.css';
となると、 storybook-nextjs-font-loader を Loader として指定する module.rules 設定がありそう
snakaBabel で import 文を transform して storybook-nextjs-font-loader を使うようにしているっぽい。
snakaStorybook の addon の仕組みについて調べる
snakapreset addon は preset.ts (ファイル名は任意で export する関数名が重要なはず ) で export した webpackFinal 関数が呼び出されるようになってるっぽい
To customize the Webpack configuration in Storybook to add support for additional file types, apply specific loaders, configure plugins, or make any other necessary modifications, you can use the
webpackFinalAPI. Once invoked, it will extend the default Webpack configuration with the provided configuration.
snakaということで、先程の preset.ts の設定が Webpack の設定として追加されているはず