تخصيص ضبط Babel في Next.js
تضيف Next.js مجموعة الإعدادات next/babel
إلى تطبيقك، وتحتوي هذه المجموعة على كل ما هو مطلوب لتصريف تطبيقات React وشيفرة الواجهة الخلفية. لكن إن أردت توسيع إعدادات Babel الافتراضية فهذا ممكن.
ولكي تفعل ذلك، ما عليك سوى تعريف ملف babelrc.
(أو babel.config.js
) في أعلى شجرة تطبيقك. فإن وجدت Next.js هذا الملف، سيُعدُّ مصدر المعلومات، وينبغي أن يُعرِّف المجموعة next/babel
.
إليك مثالًا عن ملف babelrc.
:
{
"presets": ["next/babel"],
"plugins": []
}
للاطلاع على مزيد من مجموعات الإعدادات الجزئية الموجودة ضمن next/babel
، اطلع على المثال المخصص لتوضيح هذه الفكرة على GitHub. ولإضافة مجموعة إعدادات جزئية أو إضافات دون تهيئتها، اكتب الشفرة التالية:
{
"presets": ["next/babel"],
"plugins": ["@babel/plugin-proposal-do-expressions"]
}
لإضافة مجموعة إعدادات جزئية أو إضافات بتهيئة خاصة، اكتب الشفرة التالية ضمن حقل المجموعة الجزئية next/babel
كالتالي:
{
"presets": [
[
"next/babel",
{
"preset-env": {},
"transform-runtime": {},
"styled-jsx": {},
"class-properties": {}
}
]
],
"plugins": []
}
ملاحظة: تستخدم Next.js النسخة الحالية current من Node.js من أجل تصريف الشيفرة من جانب الخادم.
ملاحظة: يجب أن تبقي قيمة الخيار modules
في "preset-env"
دائمًا false
وإلا ستُعطَّل ميزة فصل الشيفرة في webpack.
أمثلة
المصادر
- الصفحة Customizing babel Config من توثيق Next.js الرسمي.