إذا سبق لك الانتظار لدقائق حتى ينتهي بناء webpack، فأنت تعرف هذا الألم جيداً. Rspack و Rsbuild جاءا لتغيير هذا الواقع. مكتوب بلغة Rust، Rspack هو بديل مباشر لـ webpack يوفر سرعة بناء أسرع حتى 10 مرات، بينما Rsbuild هو أداة البناء عالية المستوى التي توفر تجربة تطوير جاهزة للاستخدام مباشرة.

في هذا الدليل، ستبني تطبيق React كامل من الصفر باستخدام Rsbuild، ثم ستتعلم كيفية إعداد Rspack مباشرة للحالات المتقدمة. كما ستتعلم كيفية ترحيل مشروع webpack حالي خطوة بخطوة.

المتطلبات الأساسية

قبل البدء، تأكد من توفر:

Node.js 18+ مثبت (يُنصح بـ Node 20)
npm أو yarn أو pnpm كمدير للحزم
معرفة أساسية بـ React و TypeScript
محرر أكواد (يُنصح بـ VS Code)
اختياري: مشروع webpack حالي إذا كنت تخطط للترحيل

ما ستبنيه

بنهاية هذا الدليل، ستحصل على:

تطبيق React + TypeScript جديد مبني بـ Rsbuild من الصفر
فهم لإعدادات Rspack للتحكم المتقدم
المعرفة اللازمة لترحيل أي مشروع webpack إلى Rspack

فهم منظومة Rspack

قبل الغوص في الكود، لنفهم الأداتين الرئيسيتين:

Rspack هو المحزم منخفض المستوى، بديل لـ webpack مبني بلغة Rust. متوافق مع معظم إضافات ومحملات webpack مع كونه أسرع بشكل كبير.
Rsbuild هو أداة البناء عالية المستوى المبنية على Rspack. فكر فيها كما هو Create React App أو Vite لمحزماتها، لكن مدعومة بـ Rspack.

متى تستخدم أياً منهما؟

حالة الاستخدام	الأداة
مشروع React جديد	Rsbuild
تحتاج تحكم كامل مثل webpack	Rspack CLI
الترحيل من CRA	Rsbuild
الترحيل من webpack	Rspack (ثم اختيارياً Rsbuild)
تحزيم مكتبات	Rspack

الخطوة 1: إنشاء مشروع React جديد مع Rsbuild

أسرع طريقة للبدء هي استخدام مولد مشاريع Rsbuild:

npm create rsbuild@latest

عند السؤال، اختر:

اسم المشروع: my-rsbuild-app
الإطار: React
اللغة: TypeScript

هذا ينشئ مشروعاً بإعدادات افتراضية ذكية. انتقل إليه وثبت التبعيات:

cd my-rsbuild-app
npm install

شغل خادم التطوير:

npm run dev

تطبيقك يعمل الآن على http://localhost:3000 مع تحديث فوري فائق السرعة (HMR).

الخطوة 2: استكشاف بنية المشروع

المشروع المولد له بنية نظيفة:

my-rsbuild-app/
  src/
    App.tsx
    App.css
    index.tsx
    env.d.ts
  rsbuild.config.ts
  tsconfig.json
  package.json

الملف الأساسي هو rsbuild.config.ts. افتحه:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
 
export default defineConfig({
  plugins: [pluginReact()],
});

هذا كل شيء. سطران من الإعدادات وتحصل على بيئة React + TypeScript كاملة مع:

تجميع مبني على SWC (لا حاجة لـ Babel)
دعم CSS Modules
تحديث فوري (Fast Refresh)
تقسيم تلقائي للكود
تحميل متغيرات البيئة

الخطوة 3: إعداد Rsbuild للإنتاج

لنضف إعدادات جاهزة للإنتاج. حدث rsbuild.config.ts:

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
 
export default defineConfig({
  plugins: [
    pluginReact({
      swcReactOptions: {
        runtime: 'automatic',
      },
      splitChunks: {
        react: true,
        router: true,
      },
    }),
  ],
  source: {
    entry: {
      index: './src/index.tsx',
    },
  },
  output: {
    distPath: {
      root: 'dist',
    },
    cleanDistPath: true,
    sourceMap: {
      js: process.env.NODE_ENV === 'production'
        ? 'source-map'
        : 'cheap-module-source-map',
    },
  },
  html: {
    title: 'My Rsbuild App',
    favicon: './src/favicon.ico',
  },
  server: {
    port: 3000,
    open: true,
  },
  performance: {
    chunkSplit: {
      strategy: 'split-by-experience',
    },
  },
});

ماذا يفعل كل قسم:

plugins: يسجل إضافة React مع تقسيم الأجزاء لـ React و React Router
source.entry: يحدد نقطة دخول التطبيق
output: يضبط مخرجات البناء وخرائط المصدر والتنظيف
html: يعين عنوان الصفحة والأيقونة
server: إعدادات خادم التطوير مع الفتح التلقائي
performance.chunkSplit: يقسم أجزاء المكتبات بذكاء بناءً على الأنماط الشائعة

الخطوة 4: إضافة CSS Modules والتنسيق

يدعم Rsbuild وحدات CSS مباشرة. أنشئ مكوناً بأنماط محلية:

/* src/components/Card.module.css */
.card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  transition: box-shadow 0.2s ease;
}
 
.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
 
.title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
}
 
.description {
  color: #666;
  line-height: 1.6;
}

// src/components/Card.tsx
import styles from './Card.module.css';
 
interface CardProps {
  title: string;
  description: string;
}
 
export function Card({ title, description }: CardProps) {
  return (
    <div className={styles.card}>
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.description}>{description}</p>
    </div>
  );
}

أي ملف ينتهي بـ .module.css يُعامل تلقائياً كوحدة CSS. لا حاجة لإعدادات إضافية.

الخطوة 5: متغيرات البيئة

يحمل Rsbuild ملفات .env تلقائياً. أنشئ ملف .env:

# .env
PUBLIC_API_URL=https://api.example.com
PUBLIC_APP_NAME=My Rsbuild App

استخدمها في الكود:

// المتغيرات المسبوقة بـ PUBLIC_ متاحة في كود العميل
console.log(process.env.PUBLIC_API_URL);
console.log(process.env.PUBLIC_APP_NAME);

يمكنك تخصيص البادئة في الإعدادات:

export default defineConfig({
  loadEnv: {
    prefixes: ['PUBLIC_', 'REACT_APP_'],
  },
});

هذا مفيد بشكل خاص عند الترحيل من Create React App، حيث تستخدم المتغيرات بادئة REACT_APP_.

الخطوة 6: إعدادات Rspack المتقدمة

للمشاريع التي تحتاج تحكم على مستوى webpack، يمكنك استخدام Rspack مباشرة. إليك ملف rspack.config.ts كامل لمشروع React + TypeScript:

import { defineConfig } from '@rspack/cli';
import { rspack, type SwcLoaderOptions } from '@rspack/core';
import { ReactRefreshRspackPlugin } from '@rspack/plugin-react-refresh';
 
const isDev = process.env.NODE_ENV === 'development';
const targets = ['last 2 versions', '> 0.2%', 'not dead'];
 
export default defineConfig({
  entry: {
    main: './src/index.tsx',
  },
  output: {
    path: './dist',
    filename: isDev ? '[name].js' : '[name].[contenthash:8].js',
    cssFilename: isDev ? '[name].css' : '[name].[contenthash:8].css',
    clean: true,
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js'],
    alias: {
      '@': './src',
    },
  },
  module: {
    rules: [
      {
        test: /\.(tsx?|jsx?)$/,
        exclude: /node_modules/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                  development: isDev,
                  refresh: isDev,
                },
              },
            },
            env: { targets },
          } satisfies SwcLoaderOptions,
        },
      },
      {
        test: /\.css$/,
        type: 'css/auto',
      },
      {
        test: /\.(png|jpe?g|gif|svg|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8KB
          },
        },
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './index.html',
    }),
    new rspack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    isDev && new ReactRefreshRspackPlugin(),
  ].filter(Boolean),
  devServer: {
    port: 3000,
    hot: true,
    historyApiFallback: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all',
        },
      },
    },
  },
});

الفروقات الأساسية عن webpack:

builtin:swc-loader يستبدل babel-loader بالكامل. مكتوب بلغة Rust ويجمع TypeScript و JSX بشكل أصلي.
نوع css/auto يعالج ملفات CSS بما في ذلك اكتشاف CSS Modules تلقائياً.
rspack.HtmlRspackPlugin هو بديل أصلي بلغة Rust لـ html-webpack-plugin.
ReactRefreshRspackPlugin يستبدل @pmmmwh/react-refresh-webpack-plugin.

الخطوة 7: ترحيل مشروع Webpack حالي

إذا كان لديك مشروع webpack حالي، اتبع هذه الخطوات:

7.1: تثبيت Rspack

npm install @rspack/core @rspack/cli -D
npm install @rspack/plugin-react-refresh -D

7.2: إعادة تسمية ملف الإعدادات

mv webpack.config.js rspack.config.js

7.3: تحديث سكريبتات الحزمة

{
  "scripts": {
    "dev": "rspack serve",
    "build": "rspack build"
  }
}

7.4: استبدال babel-loader بـ builtin:swc-loader

احذف تبعيات Babel:

npm uninstall babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

استبدل قاعدة babel-loader في إعداداتك:

// قبل (webpack)
{
  test: /\.(js|jsx|ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        '@babel/preset-typescript',
      ],
    },
  },
}
 
// بعد (rspack)
{
  test: /\.(js|jsx|ts|tsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'builtin:swc-loader',
    options: {
      jsc: {
        parser: {
          syntax: 'typescript',
          tsx: true,
        },
        transform: {
          react: {
            runtime: 'automatic',
            development: process.env.NODE_ENV === 'development',
            refresh: process.env.NODE_ENV === 'development',
          },
        },
      },
    },
  },
}

7.5: استبدال الإضافات

إضافة webpack	البديل في Rspack
`html-webpack-plugin`	`rspack.HtmlRspackPlugin`
`mini-css-extract-plugin`	مدمج (استخدم `type: 'css/auto'`)
`copy-webpack-plugin`	`rspack.CopyRspackPlugin`
`DefinePlugin`	`rspack.DefinePlugin`
`react-refresh-webpack-plugin`	`@rspack/plugin-react-refresh`

7.6: معالجة CSS

استبدل سلسلة css-loader + style-loader بنوع CSS المدمج:

// قبل (webpack)
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader'],
}
 
// بعد (rspack)
{
  test: /\.css$/,
  type: 'css/auto',
}

الخطوة 8: إضافة الإضافات الشائعة

دعم Sass/SCSS

npm install @rsbuild/plugin-sass -D

import { pluginSass } from '@rsbuild/plugin-sass';
 
export default defineConfig({
  plugins: [
    pluginReact(),
    pluginSass(),
  ],
});

SVG كمكونات React

npm install @rsbuild/plugin-svgr -D

import { pluginSvgr } from '@rsbuild/plugin-svgr';
 
export default defineConfig({
  plugins: [
    pluginReact(),
    pluginSvgr({
      svgrOptions: {
        exportType: 'named',
      },
    }),
  ],
});

استخدم ملفات SVG كمكونات:

import { ReactComponent as Logo } from './logo.svg';
 
function App() {
  return <Logo width={100} height={100} />;
}

Tailwind CSS

لا حاجة لإضافة خاصة. فقط ثبت Tailwind وأعده بشكل عادي:

npm install tailwindcss @tailwindcss/postcss postcss -D

أنشئ ملف postcss.config.js:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

ثم استورد Tailwind في ملف CSS:

@import "tailwindcss";

يكتشف Rsbuild إعدادات PostCSS تلقائياً.

الخطوة 9: البناء والتحليل

شغل بناء الإنتاج:

npm run build

ستلاحظ أن البناء يكتمل أسرع بكثير من webpack. لمشروع React متوسط الحجم، توقع:

المقياس	webpack	Rspack
بناء بارد	30-60 ثانية	3-6 ثوانٍ
تحديث HMR	500-2000 مللي ثانية	50-200 مللي ثانية
بدء خادم التطوير	10-20 ثانية	1-3 ثوانٍ

لتحليل حزمتك:

RSBUILD_BUNDLE_ANALYZE=true npm run build

هذا يولد تقرير تحليل تفاعلي للحزمة في متصفحك.

اختبار التنفيذ

تحقق من أن كل شيء يعمل بشكل صحيح:

خادم التطوير: شغل npm run dev وتأكد من عمل HMR بتعديل مكون
CSS Modules: تحقق من أن الأنماط محلية (أسماء الفئات يجب أن تكون مشفرة)
TypeScript: أدخل خطأ في النوع وتحقق من ظهوره في الطرفية
بناء الإنتاج: شغل npm run build وقدم مجلد dist
متغيرات البيئة: أضف متغير PUBLIC_ واطبعه في مكون

استكشاف الأخطاء

خطأ "Module not found" لمحملات webpack

إذا رأيت أخطاء عن محملات مفقودة، فأنت على الأرجح تستخدم محمل خاص بـ webpack. تحقق مما إذا كان لدى Rspack بديل مدمج (معظم الشائعة منها متوفرة).

CSS لا يُستخرج في الإنتاج

تأكد من استخدام type: 'css/auto' في قواعد Rspack. يتعامل Rsbuild مع هذا تلقائياً.

React Fast Refresh لا يعمل

تأكد من أن ReactRefreshRspackPlugin مضاف فقط في وضع التطوير وأن refresh: true مضبوط في خيارات SWC.

إضافات webpack غير متوافقة

بينما تعمل معظم إضافات webpack، بعضها الذي يعتمد على واجهات برمجة webpack الداخلية قد لا يعمل. تحقق من قائمة التوافق في rspack.dev للبدائل.

الخطوات التالية

استكشف منظومة إضافات Rsbuild الكاملة في rsbuild.dev
أعد Storybook مع Rsbuild باستخدام storybook-rsbuild
جرب Module Federation للـ micro-frontends مع Rspack
أضف الاختبارات مع Vitest (يعمل بسلاسة مع Rsbuild)
اطلع على Rslib لبناء حزم المكتبات مع Rspack

الخلاصة

يجلب Rspack و Rsbuild سرعة Rust إلى عالم تحزيم JavaScript دون التضحية بتوافق webpack. سواء كنت تبدأ مشروعاً جديداً مع نهج Rsbuild بدون إعدادات أو ترحل مشروع webpack حالي إلى Rspack، ستحصل على تحسينات كبيرة في سرعة البناء بأقل مجهود.

الخلاصة الأساسية: ابدأ بـ Rsbuild للمشاريع الجديدة (يتعامل مع التعقيد نيابة عنك)، واستخدم Rspack مباشرة عندما تحتاج تحكم دقيق على مستوى webpack. في كلتا الحالتين، بناؤك سيكون أسرع، تجربة التطوير أكثر سلاسة، وفريقك أكثر سعادة.

بناء تطبيقات React أسرع 10 مرات مع Rspack و Rsbuild: دليل شامل للحزم المبني بـ Rust