كيفية التغلب على Webpack 4 وبناء تطبيق React الحلو

هذه المقالة قديمة مع الإصدار الجديد لبابل ، يرجى التحقق من المقال المحدث "كيفية الجمع بين Webpack 4 و Babel 7 لإنشاء تطبيق React الرائع" ، آخر تحديث في 13 أكتوبر 2018
اعتمادات الصورة http://pexels.com Porapak Apichodilok

في هذه المقالة ، سوف أتعرف على كيفية إعداد تطبيق React باستخدام Webpack 4. بحلول نهاية هذا البرنامج التعليمي ، ستعرف كيفية إعادة تحميل تطبيقك في كل مرة تضغط فيها على ctrl + s في محررك المفضل .

أستخدم Visual Studio Code (رمز VS) وأحبها. إنه خفيف الوزن ومرن ، وأفضل جزء هو أنه مجاني. أنا أحب مجانا. إذا لم تكن قد جربتها ، فجرّبها.

هدفنا

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

حتى نهاية هذا المقال ، ستكون جيدًا في:

  • إعداد بيئة تطوير ، مع إعادة التحميل باستخدام خادم webpack-dev
  • إضافة دعم SCSS و HTML في التعليمات البرمجية الخاصة بك مع webpack
  • إضافة دعم لميزات مثل try / catch ، async / await و rest operator
  • إنشاء بنية إنتاج - مُحسَّنة وجاهزة للنشر
  • إعداد بيئات مختلفة في الكود الخاص بك مثل المرحلة والعروض التوضيحية والإنتاج

يا رفاق أنا أخبرك أنه إذا بدا Webpack صعباً بعض الشيء ، فلن يكون هذا هو الحال بعد الآن.

بيئة التطوير

اصنع المجلد

قم بإنشاء مجلد يسمى البرنامج التعليمي في الدليل الخاص بك.

إنشاء package.json

افتح المحطة الطرفية الخاصة بك ، وانتقل إلى مجلد البرنامج التعليمي.

اكتب:

npm init -y

سيؤدي هذا إلى إنشاء ملف package.json في مجلد البرنامج التعليمي.

سيبدو الملف مثل هذا:

هذا ما سيبدو عليه ملف package.json في البداية. أنا أستخدم كود VS لغرض هذا البرنامج التعليمي

قم بإنشاء ملف index.js

سوف أقوم بإنشاء مجلد يسمى src في مجلد البرنامج التعليمي الخاص بي.

في مجلد src ، أقوم بإنشاء ملف يسمى index.js.

ونعم ، سأستخدم رحلة النجوم ونقلت كثيرًا خلال هذا البرنامج التعليمي لأنه رائع: D

حزمة رمز

أعرف أن هذا ليس كثيرًا ، لكن احمل معي. الأمور سوف تحصل مثيرة للاهتمام قريبا جدا.

الآن من أجل تجميع الكود الخاص بنا ، نحتاج إلى إعداد بعض التكوينات حتى يتمكن Webpack من معرفة مكان تجميع الكود منها. لذلك نحن بحاجة إلى تثبيت بعض التبعيات.

لذلك دعونا نبدأ بكتابة:

npm i --ave-dev webpack webpack-cli webpack-dev-server @ babel / core @ babel / preset-env @ babel / preset-react @ babel / preset-stage-2 babel-loader@^8.0.0-beta

نجاح باهر! أعلم أنه كان هناك الكثير من التبعيات. دعنا نلخص لماذا احتجنا إليها في المقام الأول.

webpack: نحتاج إلى Webpack لحزم الكود الخاص بنا.

webpack-cli: سنستخدم بعض ميزات CLI لـ Webpack لتسهيل حياتنا أثناء كتابة بعض البرامج النصية.

webpack-dev-server: سأقوم بإنشاء خادم باستخدام حزمة خادم webpack-dev-server. هذا يعني فقط أن تستخدم في بيئة التطوير ، وليس للإنتاج. هذا يعني أنه أثناء تطوير الشفرة والعمل عليها ، لا أحتاج إلى خادم منفصل مثل Node.js.

@ babel / preset-env: هذه الحزمة تتصرف تمامًا مثل @ babel / preset-latest (أو @ babel / preset-es2015 و @ babel / preset-es2016 و @ babel / preset-es2017 معًا). رائع أليس كذلك؟

@ babel / preset-react: يبدو اسم الحزمة واضحًا - هذا سيضيف دعمًا للرد بينما نقوم بتجميع كودنا.

@ babel / preset-stage-2: سيؤدي ذلك إلى إضافة ميزة المرحلة الثانية لاقتراح Ecma TC39. يمكنك قراءة المزيد عنه هنا.

@ بابل / محمل: هذا هو تبعية Webpack. لأنها تتيح نقل بابل باستخدام Webpack.

@ بابل / الأساسية: هذا هو التبعية لل @ بابل / محمل نفسه.

حتى الآن أنت تعرف قليلاً عن ما قمنا بتثبيته ولماذا.

يجب أن يكون ملف package.json لديك يبدو كالتالي:

هذا هو ما يجب أن يبدو عليه ملف package.json الآن.

إنشاء ملف بابل

نحتاج أيضًا إلى إضافة ملف جديد يسمى .babelrc ، لذلك دعونا ننشئه أيضًا.

في دليل المجلد الرئيسي ، قم بإنشاء ملف .babelrc ومقتطف الشفرة التالي. هذا سيساعد Webpack عند تجميع الشفرة وتحويل رموز Sassy التي سنكتبها.

قم بإعداد Webpack 4

حسناً ، لقد تم إنجاز الجزء الممل. دعنا ننتقل إلى الجزء الرئيسي من هذا البرنامج التعليمي: إعداد Webpack 4.

اقتباس من Star Trek:

انه مهام لي. انه مهام لي. وسوف يكون له. سوف أطارده "حول أقمار النيبال" و "حول دواء أنتاريس" و "لهيب بيرنيديشن" قبل أن أتخلى عنه.

لذلك ، دعونا ننشئ مجلدًا جديدًا يسمى config ، وداخل ذلك المجلد ، سنقوم بإنشاء ملف يسمى webpack.base.config.js.

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

دون مزيد من الانتظار ، في ملف config / webpack.base.config.js اكتب سطور التعليمات البرمجية هذه:

تحدد الوحدة النمطية مجموعة القواعد التي سيتم تطبيق Webpack على امتدادات ملفات معينة.

في صفيف قواعدنا ، نحدد اختبارًا يخبر Webpack بالملحق الذي يجب استخدامه. أنا هنا أقول Webpack لتطبيق قاعدة معينة على الملفات المستندة إلى .js فقط.

التالي يأتي استبعاد. أثناء التجميع ، لا أريد أن يقوم Webpack بنقل كل شيء. سيصبح هذا بطيئًا جدًا ، خاصةً عندما أقوم بتضمين مجلد node_modules الخاص بي أيضًا.

لذلك سأستبعده باستخدام خاصية الاستبعاد في مجموعة القواعد. آخر واحد ، وهو الأكثر أهمية ، هو خاصية use.loader. هنا أعطيها قيمة بابل لودر. ما يقوم به برنامج babel-loader هو استخدام الإعدادات المسبقة المحددة التي حددناها في ملف .babelrc الخاص بنا لنقل جميع الملفات بامتداد .js.

حتى الآن جيد جدا ، نعم؟ نحن أكثر من منتصف الطريق هناك ...

حتى الأستاذ سناب يصفق لك. رفاق العمل رائع ، نحن هناك تقريبا.

أيضًا شيء واحد آخر: Webpack 4 يعين مجلد src كنقطة الإدخال الافتراضية والمجلد dist كنقطة الإخراج الافتراضية للنتيجة المجمعة. رائع ، أليس كذلك؟

انتقل إلى مجلد البرنامج التعليمي الخاص بك وتشغيل هذا البرنامج النصي. سيؤدي هذا إلى تجميع جميع التعليمات البرمجية الخاصة بك وتشغيل هذا الرمز في المتصفح:

@ عديل Frodo MINGW64 ~ / سطح المكتب / المادة / البرنامج التعليمي
$ node_modules / .bin / webpack-dev-server - تطوير الوضع - التكوين config / webpack.base.config.js - فتح - لقطة - تاريخ - api-fallback

أساس هذا البرنامج النصي هو أنه سيجمع بين جميع الكود في دليل src وتشغيله على المتصفح على هذا العنوان:

HTTP: // المضيف المحلي: 8080 /
هم! هذا مختلف. هذا يعطي خطأ: لا يمكن الحصول على /

HTML

لذلك عندما قمنا بتشغيل البرنامج النصي قام بتجميع وفتح المتصفح. الآن كان يحتوي على الشفرة التي كتبناها في ملف index.js الخاص بنا ، لكن ليس لديه ملف. html يمكنه تشغيله.

نحتاج إلى إضافة مكون html-webpack-plugin داخل ملف webpack.base.config.js ، وملف index.html في دليل src الخاص بنا.

أولاً ، قم بتثبيت التبعية لنقل HTML مع Webpack:

npm i --save-dev html-webpack-plugin

يجب أن يبدو ملف package.json الخاص بك كما يلي:

الآن ، دعونا نضيف ملف HTML في دليل src الخاص بنا ونسمه index.html:

يجب أن يبدو دليل المشروع لدينا الآن:

دليل مشروعنا ، يجب أن يبدو شيء من هذا القبيل

بينما نحن في ذلك ، دعونا نضيف ذلك html-webpack-plugin في ملف webpack.base.config.js.

لذلك أضفنا شيئًا جديدًا إلى ملف config webpack الخاص بنا - هل لاحظت؟ أنا فقط العبث معك. وأنا أعلم أنك فعلت.

شباب العمل الجيد ، لقد انتهينا تقريبا.

الآن ماذا يفعل هذا البرنامج المساعد؟ حسنًا ، الأمر بسيط جدًا. الإضافات ، ببساطة ، إضافة قدرات إلى Webpack الخاص بك. يمكنك معرفة المزيد عنهم هنا.

لقد أضفت الآن هذا البرنامج المساعد واحد يسمى html-webpack-plugin. الغرض من هذا البرنامج المساعد بسيط للغاية: فهو ينشئ ملفات HTML لخدمة ملف (ملفات) الحزمة الخاصة بك.

حسنًا ، فلنشغل هذا النص مرة أخرى (عبرت الأصابع). "آمل ألا توجد أخطاء هذه المرة" ، قال كل مطور مرة واحدة.

@ عديل Frodo MINGW64 ~ / سطح المكتب / المادة / البرنامج التعليمي
$ node_modules / .bin / webpack-dev-server - تطوير الوضع - التكوين config / webpack.base.config.js - فتح - لقطة - تاريخ - api-fallback

سيؤدي ذلك إلى تجميع المتصفح وفتحه في المنفذ الافتراضي المتاح. العقل هو:

HTTP: // المضيف المحلي: 8080 /
لقد قمت ببساطة بالنقر فوق ctrl + shift + i ، مما فتح عنصر الفحص في متصفح chrome الخاص بي

الجزء الأزرق: الجزء الأزرق هو ببساطة المكان الذي أضع فيه علامات التعريف الخاصة بي وحدد عنوانًا للتطبيق.

الجزء الأصفر: الجزء الأصفر المميز هو الجزء الثابت المرمز الذي كتبناه في ملف index.html. هذا هو المكان الذي سيتواجد به تطبيق React في المستقبل.

الجزء الأحمر: الجزء الذي أشرت إليه باللون الأحمر هو الجزء الأكثر إثارة للاهتمام. لم نكتب هذا أبدًا في ملف index.html ، لذا من أين جاء؟

Webpack ذكي جدا. استغرق ذلك الملف في index.js الخاص بك ، وحزم كل شيء بشكل جيد ، وأضاف كل شيء بدقة في الملف المسمى main.js. ثم حقنه في ملف index.html. أكثر من رائع!

أضف رد

دعنا نضيف React واستمر الحفل. لذلك ، نحن بحاجة إلى تثبيت بعض التبعيات.

دعنا نبدء ب:

npm رد فعل رد فعل دوم - حفظ

اذهب الآن في ملف index.js واكتب:

لنشغل هذا النص مرة أخرى:

@ عديل Frodo MINGW64 ~ / سطح المكتب / المادة / البرنامج التعليمي
$ node_modules / .bin / webpack-dev-server - تطوير الوضع - التكوين config / webpack.base.config.js - فتح - لقطة - تاريخ - api-fallback

سيؤدي هذا إلى تجميع وفتح المتصفح في المنفذ الافتراضي. العقل هو:

HTTP: // المضيف المحلي: 8080 /

واو ، هل رأيت ما فتح في متصفحك؟ نعم! انت فعلت! أول Webpack تكوين تطبيق React.

الآن لا يزال هناك الكثير من الأشياء للقيام به. لكن الرجل يا رجل. عمل جيد!

هذا هو رد فعل التطبيق لدينا ، تشغيل Yayyyy! :)

الان هذا هو الجزء المضحك. اذهب إلى ملف index.js وقم بتغيير العنوان إلى أي شيء تختاره. اضغط على ctrl + s وتحقق من متصفحك. انها تلقائيا تحديث المحتوى الخاص بك.

رائع ، أليس كذلك؟

دعونا نلخص

لقد أضفنا بيئة التطوير. أضفنا الساخنة وحدة إعادة تحميل. أضفنا الدعم لملفات .js مع رمز التفاعل. في الجزء التالي ، سنضيف دعم SCSS في Webpack الخاص بنا.

SCSS

لدعم SCSS ، نحتاج إلى إضافة مزيد من التبعيات في ملف package.json الخاص بنا.

تثبيت الحزم التالية:

npm i - حفظ نمط dev-css-loader css-loader sass-loader node-sass extract-text-webpack-plugin@^4.0.0-beta.0

sass-loader: سيساعدنا هذا البرنامج المساعد في ترجمة SCSS إلى CSS.

node-sass: يتطلب sass-loader node-sass كتبعية نظير.

css-loader: محمل CSS يفسرimport و url () مثل import / require () وسيحلها.

style-loader: يضيف CSS إلى DOM عن طريق حقن علامة النمط.

extract-text-webpack-plugin: يقوم بنقل جميع وحدات .css المطلوبة إلى ملف CSS منفصل.

لذلك لم تعد أنماطك مضمنة في حزمة جافا سكريبت ، ولكن في ملف CSS منفصل (styles.css). إذا كان إجمالي حجم ورقة الأنماط كبيرًا ، فسيكون أسرع لأنه يتم تحميل حزمة CSS بالتوازي مع حزمة JavaScript.

الآن وقد تم تثبيت تبعياتنا ، دعونا نجري بعض التغييرات على ملف تهيئة Webpack الخاص بنا.

دعونا نفهم ما فعلناه هنا أولاً. في الوحدة النمطية الخاصة بنا. لقد أضفنا قاعدة جديدة. ما تفعله هذه القاعدة هو تطبيق بعض الحزم على جميع ملفات .scss. آمل أن يكون ذلك منطقيا. داخل استخدامنا ، نقول لها استخراج بعض المعلومات.

لنكن أكثر عمقًا ، وسأحاول أن أبسط الأمر قدر الإمكان.

{
   احتياطي: "نمط محمل" ،
   الاستخدام: "css-loader! sass-loader"
}

حاول قراءة هذا الرمز من الأسفل إلى الأعلى.

احصل على كل كود SASS - .scss - باستخدام sass-loader ثم قم بتحويله إلى CSS code باستخدام css-loader. ثم خذ كل رمز CSS هذا وحقنه في DOM لدينا باستخدام علامة