الفرق بين المراجعتين ل"Next.js/customizing babel config"
| سطر 2: | سطر 2: | ||
تضيف Next.js مجموعة الإعدادات <code>next/babel</code> إلى تطبيقك، وتحتوي هذه المجموعة على كل ما هو مطلوب لتصريف تطبيقات React وشيفرة الواجهة الخلفية. لكن إن أردت توسيع إعدادات Babel الافتراضية فهذا ممكن. | تضيف Next.js مجموعة الإعدادات <code>next/babel</code> إلى تطبيقك، وتحتوي هذه المجموعة على كل ما هو مطلوب لتصريف تطبيقات React وشيفرة الواجهة الخلفية. لكن إن أردت توسيع إعدادات Babel الافتراضية فهذا ممكن. | ||
| − | ولكي تبدأ العمل، ما عليك سوى تعريف ملف <code>babelrc.</code> (أو <code>babel.config.js</code>) في أعلى شجرة تطبيقك. فإن وجدت هذا الملف، سيُعدُّ مصدر المعلومات، | + | ولكي تبدأ العمل، ما عليك سوى تعريف ملف <code>babelrc.</code> (أو <code>babel.config.js</code>) في أعلى شجرة تطبيقك. فإن وجدت Next.js هذا الملف، سيُعدُّ مصدر المعلومات، وينبغي أن يُعرِّف المجموعة <code>next/babel</code>. |
إليك مثالًا عن ملف <code>babelrc.</code>:<syntaxhighlight lang="json"> | إليك مثالًا عن ملف <code>babelrc.</code>:<syntaxhighlight lang="json"> | ||
| سطر 9: | سطر 9: | ||
"plugins": [] | "plugins": [] | ||
} | } | ||
| − | </syntaxhighlight>للاطلاع على مزيد من مجموعات الإعدادات الجزئية الموجودة ضمن <code>next/babel</code>، اطلع على [https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts المثال المخصص لتوضيح هذه الفكرة على GitHub]. | + | </syntaxhighlight>للاطلاع على مزيد من مجموعات الإعدادات الجزئية الموجودة ضمن <code>next/babel</code>، اطلع على [https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts المثال المخصص لتوضيح هذه الفكرة على GitHub]. ولإضافة مجموعة إعدادات جزئية أو إضافات دون تهيئتها، اكتب الشفرة التالية:<syntaxhighlight lang="json"> |
| − | |||
| − | |||
{ | { | ||
"presets": ["next/babel"], | "presets": ["next/babel"], | ||
| سطر 31: | سطر 29: | ||
"plugins": [] | "plugins": [] | ||
} | } | ||
| − | </syntaxhighlight>'''ملاحظة''': تستخدم النسخة الحالية من أجل تصريف الشيفرة من جانب الخادم. | + | </syntaxhighlight>'''ملاحظة''': تستخدم Next.js النسخة الحالية من أجل تصريف الشيفرة من جانب الخادم. |
'''ملاحظة''': يجب أن تبقي قيمة الخيار <code>modules</code> في <code>"preset-env"</code> دائمًا <code>false</code> وإلا ستُعطَّل ميزة فصل الشيفرة في webpack. | '''ملاحظة''': يجب أن تبقي قيمة الخيار <code>modules</code> في <code>"preset-env"</code> دائمًا <code>false</code> وإلا ستُعطَّل ميزة فصل الشيفرة في webpack. | ||
مراجعة 06:28، 4 يونيو 2022
تضيف 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 النسخة الحالية من أجل تصريف الشيفرة من جانب الخادم.
ملاحظة: يجب أن تبقي قيمة الخيار modules في "preset-env" دائمًا false وإلا ستُعطَّل ميزة فصل الشيفرة في webpack.
المصادر
- الصفحة Customizing babel Config من توثيق Next.js الرسمي.