turbo (تجريبي)

تحذير: هذه الميزات تجريبية وستعمل فقط مع next --turbo.

محملات (loaders) webpack

حاليًا، يدعم Turbopack مجموعة فرعية من واجهة برمجة تطبيقات محملات webpack، مما يسمح لك باستخدام بعض محملات webpack لتحويل الأكواد في Turbopack.

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

module.exports = {
  experimental: {
    turbo: {
      rules: {
        // تنسيق الخيارات
        '*.md': [
          {
            loader: '@mdx-js/loader',
            options: {
              format: 'md',
            },
          },
        ],
        // تنسيق بدون خيارات
        '*.mdx': ['@mdx-js/loader'],
      },
    },
  },
}

بعد ذلك، مع التكوين أعلاه، يمكنك استخدام الأكواد المحولة من تطبيقك:

import MyDoc from './my-doc.mdx'

export default function Home() {
  return <MyDoc />
}

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

من خلال ملف 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 موجّهًا لبيئات المتصفح.

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