🚀
【Next.js和訳】Advanced Features/Customizing Babel Config
この記事について
この記事は、Advanced Features/Customizing Babel Configの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Customizing Babel Config
例 | Example
Next.js には、React アプリケーションやサーバーサイドのコードをコンパイルするために必要なものがすべて含まれているnext/babel
プリセットがアプリに含まれています。
しかし、デフォルトの Babel コンフィグを拡張したい場合は、それも可能です。
アプリのトップに .babelrc
ファイル (または babel.config.js
) を定義するだけです。
.babelrc
ファイルがあれば、そのファイルが優先して適用されるため、Next.js が必要とするnext/babel
プリセットも定義する必要があります。
以下は、.babelrc
ファイルの例です。
.babelrc
{
"presets": ["next/babel"],
"plugins": []
}
next/babel
に含まれるプリセットについては、このファイルを参考にしてみてください。
プリセットやプラグインを設定せずに追加するには、このような方法があります。
.babelrc
{
"presets": ["next/babel"],
"plugins": ["@babel/plugin-proposal-do-expressions"]
}
カスタム設定のプリセット/プラグインを追加するには、次のようにnext/babel
プリセットで行います。
.babelrc
{
"presets": [
[
"next/babel",
{
"preset-env": {},
"transform-runtime": {},
"styled-jsx": {},
"class-properties": {}
}
]
],
"plugins": []
}
各コンフィグで利用可能なオプションの詳細については、各コンフィグのドキュメントサイトをご覧ください。
Discussion