🚀
【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