مولدات التعليمات البرمجية وأتمتة مساحة العمل
اكتب مولدات Nx مخصصة لإنشاء المكوّنات والصفحات والمكتبات بطريقة متسقة.
مولدات التعليمات البرمجية وأتمتة مساحة العمل درس مجاني في React Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.
ما مولّدات Nx؟
مولّدات Nx هي أدوات لإنشاء الشيفرة (تشبه schematics) تنشئ الملفات، وتحدّث الإعدادات، وتحافظ على الاتساق في المستودع الأحادي. يمكنك تشغيل المولّدات المضمّنة أو كتابة مولّداتك الخاصة.
تشغيل المولّدات المضمّنة
استخدم nx generate مع حزمة المولّد واسمه. أضف --dry-run لمعاينة التغييرات من دون كتابة الملفات.
# Generate a React component in the ui library:
npx nx generate @nx/react:component Button --project=ui --dry-run
# Generate a hook:
npx nx generate @nx/react:hook useAuth --project=data-accessإنشاء مولّد مخصص
أنشئ قالب مولّد فارغًا داخل مشروع إضافة محلية.
# Create a local plugin:
npx nx generate @nx/plugin:plugin my-plugin --directory=tools/my-plugin
# Add a generator to it:
npx nx generate @nx/plugin:generator feature-module --project=my-pluginبنية المولّد
يتكوّن المولّد من ملف schema.json (للمدخلات) وملف index.ts (للمنطق الذي يعدّل الملفات ومساحة العمل).
// tools/my-plugin/src/generators/feature-module/schema.json
{
"$schema": "...",
"title": "Feature Module Generator",
"properties": {
"name": { "type": "string", "description": "Feature name" },
"directory": { "type": "string", "default": "libs" }
},
"required": ["name"]
}ملف Index.ts للمولّد
تستقبل دالة المولّد شجرة الملفات (وهي تجريد لنظام الملفات) والخيارات. استخدم واجهات برمجة الشجرة لقراءة الملفات وكتابتها وتحديثها.
import { Tree, formatFiles, generateFiles } from '@nx/devkit';
import * as path from 'path';
export default async function (tree: Tree, options: FeatureGeneratorSchema) {
generateFiles(
tree,
path.join(__dirname, 'files'), // template folder
`libs/${options.name}`, // output path
{ ...options, tmpl: '' } // template variables
);
await formatFiles(tree); // run prettier on generated files
}ملفات القوالب
ضع ملفات القوالب في مجلد files/ بجوار المولّد. استخدم صياغة EJS لإضافة محتوى ديناميكي.
// tools/my-plugin/src/generators/feature-module/files/src/index.ts__tmpl__
export * from './lib/<%= name %>';
// files/src/lib/__name@dasherize__.ts__tmpl__
export function <%= name %>() {
return '<%= name %> feature';
}تحديث project.json
يمكن للمولّدات تعديل الملفات الموجودة. استخدم updateProjectConfiguration لإضافة أهداف جديدة إلى مشروع.
import { updateProjectConfiguration, readProjectConfiguration } from '@nx/devkit';
const config = readProjectConfiguration(tree, options.project);
config.targets.storybook = {
executor: '@storybook/nx:build-storybook',
options: { outputDir: 'dist/storybook' },
};
updateProjectConfiguration(tree, options.project, config);تشغيل المولّد الخاص بك
شغّل المولّدات المخصصة بالطريقة نفسها التي تشغّل بها المولّدات المضمّنة، مع الإشارة إلى الإضافة المحلية.
npx nx generate my-plugin:feature-module my-feature --dry-run
npx nx generate my-plugin:feature-module my-featureترحيلات مساحة العمل
يوفر Nx ترحيلات تلقائية عند تحديث إصدار Nx. شغّل nx migrate latest ثم nx migrate --run-migrations لتطبيقها.
npx nx migrate latest
# Review migrations.json
npx nx migrate --run-migrationsأتمتة الشيفرة التمهيدية
أنشئ مولّدات مخصصة للأنماط الخاصة بفريقك: وحدات ميزات ببنية مجلدات موحّدة، وصفحات CRUD، ومكتبات للوصول إلى البيانات تحتوي على hooks للاستعلام مُعدّة مسبقًا، وغير ذلك.
اختبار المولّدات
يوفر Nx بيئة اختبار للمولّدات. أنشئ شجرة مصغّرة في الاختبارات للتحقق من إنشاء الملفات من دون لمس نظام الملفات الحقيقي.
import { createTreeWithEmptyWorkspace } from '@nx/devkit/testing';
test('generates feature module', async () => {
const tree = createTreeWithEmptyWorkspace();
await generator(tree, { name: 'products' });
expect(tree.exists('libs/products/src/index.ts')).toBe(true);
});تحقق سريع
ما الغرض من مجلد files/ في مولّد Nx؟
مراجعة
تنشئ مولّدات Nx الملفات بصورة متسقة عبر nx generate. اكتب مولّدات مخصصة باستخدام schema.json (للمدخلات) وindex.ts (للمنطق). استخدم مجلد files/ لقوالب EJS. اختبر المولّدات باستخدام createTreeWithEmptyWorkspace لنظام ملفات آمن داخل الذاكرة.
تعلم React مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 88
- الدروس
- 324
الأسئلة الشائعة
هل درس «مولدات التعليمات البرمجية وأتمتة مساحة العمل» مجاني؟
نعم — نص درس «مولدات التعليمات البرمجية وأتمتة مساحة العمل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.
ماذا ستتعلم في «مولدات التعليمات البرمجية وأتمتة مساحة العمل»؟
اكتب مولدات Nx مخصصة لإنشاء المكوّنات والصفحات والمكتبات بطريقة متسقة. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «مولدات التعليمات البرمجية وأتمتة مساحة العمل»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إنشاء Nx Monorepo باستخدام تطبيقات React
- المكتبات المشتركة والحزم الداخلية
- أوامر Nx Affected والتخزين المؤقت
- مولدات التعليمات البرمجية وأتمتة مساحة العمل