كيفية إعداد مشروع رد فعل TypeScript من البداية مع بابل و Webpack

تم التحديث: 7 سبتمبر 2019 - إصلاح الأخطاء المطبعية ، تشغيل npm => npm run-script ، أمثلة على رمز gist

المقدمة

في هذا البرنامج التعليمي ، سوف تتعلم كيفية إعداد مشروع React TypeScript من البداية. أفترض أن معظمكم يعرف ماهية TypeScript وما هي فوائده ، لذلك لن أتعمق في ذلك. ولكن بالنسبة لأولئك الذين ليسوا متأكدين وأكثر اهتماما ، يمكنك العثور على مزيد من المعلومات حول هذا الموضوع هنا. الآن ، دعنا ندرس كيفية إعداد مشروع React TypeScript من البداية.

الإعداد والشرح

بادئ ذي بدء ، نحتاج إلى التأكد من أن لديك بنية الملف الصحيحة كما هو موضح في الصورة أدناه.

لتكرارها ، يمكنك استخدام هذه الأوامر:

mkdir رد فعل - الكتابة - المرجل
رد فعل مؤتمر نزع السلاح - الطباع
mkdir -p src / components src / styles

ملاحظة: تعني علامة -p الأهل وتتيح لك إنشاء مجلدات رئيسية مع مجلدات الأطفال الخاصة بهم. جرب الأمر الأخير دون أن يرى.

تأكد من تثبيت العقدة و npm على جهازك ، إذا لم تكن متأكدًا من استخدام npm -v للتحقق من إصدار npm الخاص بك. إذا لم يكن مثبتًا لديك ، فقم بتثبيته هنا.

بمجرد التأكد من تثبيت npm أو تثبيته ، نحتاج إلى تهيئة مشروعنا باستخدام npm وإنشاء حزمة. json.

اكتب npm init لتهيئة المشروع أثناء وجودك في / react-typescript-boilerplate. سيبدأ هذا سلسلة من المطالبات لتخصيص بعض الخصائص الأساسية في package.json ، يمكنك أيضًا استدعاء npm init -y لتخطي هذه الخطوات.

الآن وبعد إعداد المشروع الأساسي ، سنحتاج إلى تثبيت بعض الحزم ، وسأقدم أيضًا شرحًا موجزًا ​​ومبسَّطًا لما تقوم به كل حزمة:

  • webpack و webpack-cli

webpack هو مجرد وحدة المجمعة. على الرغم من أنه يمكنه تجميع أي مورد أو مادة عرض تقريبًا ، إلا أنه يستخدم بشكل شائع لتجميع ملفات JavaScript لاستخدامها في المستعرض ، في هذه الحالة سيتم تجميعها في ملفات .tsx و .ts في .js حتى يمكن تقديمها.

npm تثبيت webpack webpack-cli - حفظ ديف
  • تتفاعل وتتفاعل دوم

نحتاج أيضًا إلى حزم رد الفعل والرد. يعد رد الفعل ضروريًا لتحديد مكونات React ويتم استخدام حزمة react-dom كنقطة إدخال إلى DOM (طراز كائن المستند) للويب بينما يتم استخدام حزمة react-native للبيئات الأصلية (المحمول).

تثبيت npm رد فعل رد فعل دوم - حفظ
  • نسخة مطبوعة على الآلة الكاتبة

يتم تثبيت typescript للوصول إلى خصائص التحقق من النوع الرائعة.

npm تثبيت typescript - حفظ ديف
  • بابل

بابل هو مترجم جافا سكريبت ، ويتيح لنا كتابة جافا سكريبت من الجيل التالي (es6 ، es7 ، esnext) وسيتم تجميعها في JavaScript متوافق مع المستعرض. اعتبارًا من Babel 7 ، تعاونت Microsoft وفريق Babel معًا حتى تتمكن من استخدام محمل babel لتجميع JavaScript. المكوّنان الإضافيان المركبان مخصصان لإعلام Babel بميزتين إضافيتين تملكهما TypeScript.

npm install @ babel / core babel-loader @ babel / preset-react @ babel / preset-typescript @ babel / preset-env @ babel / plugin-propos-class-properties-الخصائص @ babel / plugin-propos-object-rest-انتشار - ، حفظ ديف
  • المغلق ومحمل الاسلوب

محملان للنمط سيتم استخدامهما لتجميع CSS الخاص بك في حزمة الويب.

npm تثبيت css-loader style-loader --save-dev

أتش تي أم أل webpack-المساعد

npm تثبيت html-webpack-plugin - حفظ ديف
  • webpack ديف خادم

يقوم webpack-dev-server بمراقبة تغييراتنا وتحديث صفحة الويب كلما تم إجراء أي تغيير على مكوناتنا.

npm تثبيت webpack-dev-server - حفظ ديف
  • tslint

يتم استخدام tslint في IDE الخاص بك وسيعطيك تسطير الرمز الخاص بك باللون الأحمر إذا كان لا يلتزم بالقواعد التي قمت بتعيينها في tslint.json.

npm تثبيت tslint tslint-immutable --save-dev
  • رد فعل وأنواع رد الفعل دوم

أنواع التفاعل و react-dom هي ملفات الكتابة التي نقوم بتثبيتها لـ TypeScript.

تثبيت npm @ types / react @ types / react-dom

ملاحظة جانبية حول كتابة الملفات (types.d.ts): سيترجم برنامج التحويل البرمجي لـ TypeScript عند تثبيت حزمة بدون ملفات الكتابة الخاصة به. هذا أمر مزعج لأنه ليس في جميع حزم npm ملفات للكتابة ، لذلك سوف يشكو TypeScript من عدم وجود الوحدة النمطية. إحدى الطرق السهلة ، وإن كانت اختراقًا ، للتعامل مع ذلك هي إنشاء ملف override.d.ts في / react-typescript-boilerplate / typings والكتابة: قم بتعريف ملف package-with-no-typings-module في الوحدة النمطية. بهذه الطريقة ، ستتمكن من استخدام الحزمة دون أن يشكو IDE ، ولكن لن يكون لديك أنواع.

الآن وبعد أن أصبح لدينا جميع التبعيات والحزم اللازمة ، فلنقم أيضًا بإنشاء بعض الملفات الأساسية: index.tsx و index.html in / src. إذا كنت في. / src ، يمكنك كتابة touch index.tsx index.html لإنشاء ملفات جديدة من الجهاز.

ملاحظة: .tsx هو مجرد إصدار TypeScript لملف .jsx إذا كنت معتادًا على React.

index.html و:

إنشاء ملف HTML الذي عادةً ما يتم استضافته على خادم والموقع الذي سيتم فيه حقن رمز التفاعل (الجذر).

سنضيف أيضًا بعض الأنماط الأساسية.

في ./src/styles ، قم بإنشاء index.css بالشفرة التالية:

h1 {
    اللون: # 292727 ؛
    محاذاة النص: المركز ؛
}

في ./src/components ، قم بإنشاء App.tsx:

انظر هنا للاختلافات بين React.Component و React.PureComponent.

index.tsx:

هذا واضح إلى حد ما إذا كنت قد استخدمت React من قبل ، فأنت تقوم في الأساس بإنشاء ملف HTML أساسي وحقن مشروع التفاعل مع ReactDOM.render في الجذر.

نحتاج أيضًا إلى إضافة جميع ملفات التكوين التي ستتيح لنا تجميع الملفات وحزم الملفات وتطويرها باستخدام TypeScript:

  • package.json

تأكد من تعيين هذه الخاصية في package.json الخاص بك ، وسوف تسمح لك باستخدام npm لتجميع أنواع الاختبار والاختبار والبدء والبناء والتحقق. حاول استخدام برنامج تشغيل npm للاتصال بكل خاصية من خصائص البرامج النصية (مثل npm run-script package).

يجب إنشاء الملفات التالية في المجلد الأصل / react-typescript-boilerplate:

  • .babelrc

.babelrc سوف يخبر بابل أي الإعدادات المسبقة لاستخدامه في نقل الشفرة. يمكنك إلقاء نظرة على ما تفعله كل من هذه الأشياء ، لكن كل منها تفعل نفس الشيء بشكل أساسي وهو نقل الرمز إلى ES5.

  • webpack.config.js
  • tsconfig.json

يسمح لنا ملف tsconfig بتكوين قواعد TypeScript التي نود الالتزام بها. انظر هنا لمزيد من المعلومات حول هذا.

  • tslint.json

أخيرًا وليس آخرًا ، يحدد ملف tslint.json القواعد التي سيستخدمها IDE الخاص بنا لتقديم ملاحظات فورية حول ما إذا كان الكود الخاص بنا يلتزم بالقواعد المذكورة أم لا.

أخيرًا ، قم بتشغيل الأمر في المحطة الطرفية:

npm البداية

يجب أن يتم فتح نافذة جديدة في المتصفح الافتراضي الخاص بك وهذا كل ما في الأمر هو إعداد مشروع رد فعل TypeScript من البداية. الآن بعد أن أصبح لديك نموذج رد فعل TypeScript الخاص بك ، يمكنك البدء في إنشاء مشاريع React! إذا كنت ترغب في ذلك ، يمكنك أيضًا استنساخ إعداد رد الفعل هذا من Github الخاص بي. لا تنسى أن نجمة

إذا وجدت هذه المقالة مفيدة ، فالرجاء الضغط على زر . إذا كان لديك أي أسئلة / طلبات أو إذا واجهت أي صعوبات ، فأخبرني بذلك أدناه. سأكون سعيدًا بالمساعدة.