جافاسكريبت - مشروع ريأكت في فيجوال ستوديو 2017

أريد تطوير تطبيق React في Visual Studio 2017 بجانب تطبيق .NET الخاص بي (في نفس الحل).

أنا أستخدم TypeScript، لذلك أريد نوع مشروع يمكنني من تخصيص عملية البناء (أريد استخدام webpack للمشروع، إلخ، لذا فإن بناء TypeScript القياسي في Visual Studio غير كافٍ).

لقد قمت بتثبيت أدوات مطوري node.js لكنها تسمح لي فقط بإنشاء مشاريع محددة بـ node.js (والتي تقوم بتشغيل نسخة من node.js عند البدء) ولا تسمح لي بتخصيص عملية البناء.

أي نوع من المشاريع سيكون الأفضل لهذا؟

الإجابة رقم 1

لقد قمت بهذا مؤخرًا وأود أن أنصح بما يلي:

1. أنشئ مشروع حل "فارغ" في Visual Studio 2017.
2. أضف/أنشئ مشروع .NET الخاص بك كما تفعل عادة في Visual Studio.
3. الآن أنشئ مشروع React الخاص بك. لقد استخدمت create-react-app من فيسبوك لإنشاء مشروعي في React فعليًا. يحتوي هذا على الكثير من الميزات المدمجة الجيدة مثل Webpack و Jest (للاختبار) و yarn (لإدارة الحزم) وغيرها. ومع ذلك، هذه التفاصيل "مخفية" عنك لذلك يبدو المشروع المُنشأ أبسط بكثير. إذا كنت بحاجة إلى مزيد من التحكم في عملية البناء/الاختبار يمكنك تشغيل الأمر create-react-app eject. يُنصح بأن تعلم أن هذه عملية "اتجاه واحد" لأنه لا يمكنك إعادة الملفات إلى create-react-app. ستحتاج إلى تثبيت node و yarn بشكل منفصل، إذا لم يكن ذلك واضحًا.

4. بما أنك تريد أيضًا استخدام TypeScript، ينبغي عليك استخدام سكريبت react-scripts-ts هكذا:

   create-react-app my-app --scripts-version=react-scripts-ts

   مايكروسوفت لديها جولة جيدة هنا.

5. الجزء الصعب هو إدخال مشروع React المُنشأ إلى Visual Studio. لقد فعلت ذلك عن طريق تثبيت وحدة "تطوير Node.js" من "مثبت Visual Studio" الذي يتم تثبيته مع Visual Studio. للأسف، يبدو أن مايكروسوفت قد أزالت قالب مشروع TypeScript الفارغ أو الخالي (انظر هنا).

6. بمجرد تثبيت أدوات Node.js، يمكنك إنشاء مشروع قائم على Node في الحل الخاص بك. هناك عدة خيارات للاختيار من بينها ضمن قائمة File -> New -> Project... -> Templates -> Other Languages -> TypeScript في القائمة الجانبية اليسرى. لقد اخترت "تطبيق ويب Node.js فارغ".

7. بعد ذلك ستحتاج إلى نسخ ملفات مشروع React التي أنشأتها create-react-app إلى مشروعك في Visual Studio. أجد أنه من الأسهل إنشاء الأدلة في Visual Studio حتى تتم إضافتها إلى ملف المشروع، ثم نسخ الملفات إلى المجلدات التي تم إنشاؤها، وأخيرًا إضافتها إلى مجلد المشروع في Visual Studio.

8. في هذه المرحلة يمكنك تشغيل السكربتات الموجودة في ملف package.json والتي تمت إضافتها بواسطة create-react-app. أنا أفضل تشغيل هذه السكربتات من خلال سطر الأوامر، لكن يمكنك تشغيلها أيضًا في Visual Studio باستخدام "مستكشف مشغل المهام" بواسطة مادي كريستنسن.

الإجابة رقم 2

احتمال آخر هو استخدام امتداد React في Visual Studio Code. هذا ليس بالضبط ما طلبته، لكنك ستحصل على مظهر وإحساس مشابه لـ Visual Studio ودعم كامل لـ React.