توربو (تجريبي)

يمكن تخصيص Turbopack لتحويل ملفات مختلفة وتغيير طريقة حل الوحدات النمطية.

من الجيد معرفة:

• هذه الميزات تجريبية وستعمل فقط مع next --turbo.
• لا يتطلب Turbopack لـ Next.js محملات (loaders) أو تكوين محملات للوظائف المدمجة. يحتوي Turbopack على دعم مدمج لـ CSS وتجميع JavaScript الحديث، لذا لا حاجة لـ css-loader أو postcss-loader أو babel-loader إذا كنت تستخدم @babel/preset-env.

محملات webpack

إذا كنت بحاجة إلى دعم محملات يتجاوز ما هو مدمج، فإن العديد من محملات webpack تعمل بالفعل مع Turbopack. هناك حالياً بعض القيود:

• فقط مجموعة أساسية من واجهة برمجة تطبيقات محملات webpack تم تنفيذها. حالياً، هناك تغطية كافية لبعض المحملات الشائعة، وسنقوم بتوسيع دعم واجهة برمجة التطبيقات في المستقبل.
• فقط المحملات التي تُرجع كود JavaScript مدعومة. المحملات التي تحول ملفات مثل صفحات الأنماط أو الصور غير مدعومة حالياً.
• يجب أن تكون الخيارات الممررة إلى محملات webpack بدائية JavaScript عادية أو كائنات أو مصفوفات. على سبيل المثال، لا يمكن تمرير وحدات الإضافات (plugins) التي تم require()ها كقيم للخيارات.

لتكوين المحملات، أضف أسماء المحملات التي قمت بتثبيتها وأي خيارات في next.config.js، وقم بتعيين امتدادات الملفات إلى قائمة بالمحملات:

module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}

من الجيد معرفة: قبل إصدار Next.js 13.4.4، كان experimental.turbo.rules يُسمى experimental.turbo.loaders وكان يقبل فقط امتدادات الملفات مثل .mdx بدلاً من *.mdx.

المحملات المدعومة

تم اختبار المحملات التالية للعمل مع تنفيذ محملات webpack في Turbopack:

• babel-loader
• @svgr/webpack
• svg-inline-loader
• yaml-loader
• string-replace-loader
• raw-loader
• 'sass-loader'

أسماء مستعارة للحل (Resolve aliases)

من خلال next.config.js، يمكن تكوين Turbopack لتعديل حل الوحدات النمطية باستخدام أسماء مستعارة، مشابه لتكوين resolve.alias في webpack.

لتكوين أسماء مستعارة للحل، قم بتعيين الأنماط المستوردة إلى وجهتها الجديدة في next.config.js:

module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
}

هذا يجعل استيراد حزمة underscore يشير إلى حزمة lodash. بمعنى آخر، import underscore from 'underscore' ستحمل الوحدة النمطية lodash بدلاً من underscore.

يدعم Turbopack أيضًا التسمية المشروطة من خلال هذا الحقل، مشابه لـ الصادرات المشروطة في Node.js. حالياً، فقط شرط browser مدعوم. في المثال أعلاه، سيتم توجيه استيرادات الوحدة النمطية mocha إلى mocha/browser-entry.js عندما يكون Turbopack موجهاً لبيئات المتصفح.

امتدادات الحل (Resolve extensions)

من خلال next.config.js، يمكن تكوين Turbopack لحل الوحدات النمطية بامتدادات مخصصة، مشابه لتكوين resolve.extensions في webpack.

لتكوين امتدادات الحل، استخدم حقل resolveExtensions في next.config.js:

module.exports = {
  experimental: {
    turbo: {
      resolveExtensions: [
        '.mdx',
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.json',
      ],
    },
  },
}

هذا يستبدل امتدادات الحل الأصلية بالقائمة المقدمة. تأكد من تضمين الامتدادات الافتراضية.

لمزيد من المعلومات والإرشادات حول كيفية ترحيل تطبيقك من webpack إلى Turbopack، راجع وثائق Turbopack حول التوافق مع webpack.