أفضل مقالة لإعداد تطبيق الويب التفاعلي مع Babel + React + Webpack.

أنا دائما أحب أن أكتب عن الرد في أي وقت في وقت فراغي. أنا شخصياً قمت بتمهيد الكثير من مشاريع React في الآونة الأخيرة. كان علي دائمًا إعداد المشروع من البداية. في النهاية قمت بإنشاء https://github.com/vishalvishalgupta/react-webpack-babel-setup. كما تعلمون ، تم إنشاء مشاريع ومستودع تخزين React غير القابل للعدالة بهذه الطريقة. لكن المقالة ليست محاولتي للإعلان عن مشروع تفاعلي آخر. كان لدي عدة أسباب وراء قيامي باستخراج عملية الإعداد من مقالة أخرى خاصة بي.

قبل أن تبدأ ، يجب أن تتأكد من وجود محرر ومحطة مثبتة على جهازك. بالإضافة إلى ذلك ، ستحتاج إلى إصدار مثبت من العقدة مع npm. تأكد من إعداد كل شيء قبل متابعة القراءة.

mkdir رد فعل boilerplate
مؤتمر نزع السلاح رد فعل
npm init -y
حي المقداد
مؤتمر نزع السلاح dist
المس index.html

يحتوي التطبيق المقدم بالكامل على ملفين فقط: ملف .html وملف .js. بينما سيتم إنشاء ملف .js تلقائيًا من جميع ملفات مصدر JavaScript (عبر Webpack) لاحقًا ، يمكنك بالفعل إنشاء ملف .html يدويًا كنقطة إدخال للتطبيق الخاص بك.



  <رئيس>
     The React Webpack Babel Setup by Vishal Gupta 
  
  
    
       

إعداد Webpack

سوف تستخدم Webpack كوحدة تجميعية وأداة إنشاء. علاوة على ذلك ، سوف تستخدم خادم الويب webpack-dev لخدمة تطبيقك المجمّع في بيئة محلية. وإلا فلن تتمكن من رؤيته في المتصفح لتطويره. أخيرًا وليس آخرًا ، تحتاج إلى حزمة عقدة webpack-cli لتكوين إعداد Webpack في ملف تكوين لاحقًا. لنقم بتثبيت حزم العقدة الثلاثة باستخدام npm.

تثبيت npm - web-web-clave webpack-dev-server webpack-cli

برنامج نصي لتشغيل المشروع المستند إلى webpack:

...
"نصوص": {
  "start": "webpack-dev-server --config ./webpack.config.js - تطوير طريقة" ،
  ...
}،
...

لنقم بإنشاء ملف webpack.config.js المطلوب.

module.exports = {
  الإدخال: './src/index.js' ،
  انتاج: {
    المسار: __dirname + '/ dist' ،
    publicPath: '/' ،
    اسم الملف: 'bundle.js'
  }،
  devServer: {
    contentBase: './dist'
  }
}؛

ما هو مفقود في مشروعنا هو ملف src / index.js.

mkdir src
مؤتمر نزع السلاح src
touch index.js

index.js: -

console.log ('My React Webpack Babel Setup') ؛

الآن يجب أن تكون قادرًا على بدء تشغيل خادم webpack-dev.

npm البداية

بابل الإعداد

يمكّنك Babel من كتابة التعليمات البرمجية الخاصة بك باستخدام جافا سكريبت غير مدعوم في معظم المتصفح. Perhaphs سمعت عن JavaScript ES6 (ES2015) وما بعده. مع Babel ، سيتم تحويل الشفرة مرة أخرى إلى JavaScript vanilla بحيث يتمكن كل مستعرض ، دون الحاجة إلى تنفيذ كل جافا سكريبت ES6 وما بعده من الميزات ، من ترجمته. من أجل الحصول على عمل بابل ، تحتاج إلى تثبيت اثنين من التبعيات الرئيسية.

npm تثبيت - حفظ ديف @ بابل / كور @ بابل / الإعداد المسبق

علاوة على ذلك ، من أجل توصيله بـ Webpack ، يجب عليك تثبيت محمل يسمى:

تثبيت الآلية الوقائية الوطنية - حفظ ديف بابل لودر

كخطوة أخيرة ، بما أنك تريد استخدام React ، فأنت بحاجة إلى تكوين واحد آخر لتحويل بناء جملة React’s JSX إلى vanilla JavaScript.

من مجلد الجذر:

npm تثبيت - حفظ ديف @ بابل / مسبقا رد فعل

webpack.config.js

module.exports = {
  الإدخال: './src/index.js' ،
  وحدة: {
    قواعد: [
      {
        اختبار: / \.(js|jsx)$/ ،
        استبعاد: / node_modules / ،
        استخدام: ['بابل لودر]]
      }
    ]
  }،
  حل: {
    الامتدادات: ['*'، '.js'، '.jsx']
  }،
  انتاج: {
    المسار: __dirname + '/ dist' ،
    publicPath: '/' ،
    اسم الملف: 'bundle.js'
  }،
  devServer: {
    contentBase: './dist'
  }
}؛

يمكنك بدء التطبيق الخاص بك مرة أخرى. لا شيء يجب أن يتغير باستثناء أنه يمكنك استخدام وظائف ECMAScript القادمة لجافا سكريبت الآن.

إما إعداد الإعدادات المسبقة بابل في .bablerc مثل أدناه

...

{

"المسبقة": [

"@ بابل / مسبقا-الحياة الفطرية"،

"@ بابل / مسبقا، رد فعل"

]

}

...

أو يمكنك أيضًا تعيين المحتوى في package.json كما هو موضح أدناه.

......

"بابل": {
  "المسبقة": [
    "@ بابل / مسبقا-الحياة الفطرية"،
    "@ بابل / مسبقا، رد فعل"
  ]
}،

......

يمكّنك Babel من استخدام JavaScript مستقبلاً في متصفحك ، لأنه يقوم بنقله إلى JavaScript vanilla. أنت الآن جاهز لإنشاء مكون React الأول الخاص بك الآن.

تفاعل مع الإعداد في Webpack + Babel Project

من أجل استخدام React ، تحتاج إلى حزمتي عقدة أخرى. يجب أن تعمل حزم رد الفعل والرد دوم على إصلاح بداية npm.

من مجلد الجذر:

npm تثبيت - حفظ رد فعل رد فعل دوم

في src / index.js الخاص بك ، يمكنك تنفيذ الخطاف الأول في عالم React.

SRC / index.js

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من 'react-dom' ؛
const title = 'My React Webpack Babel Setup'؛
ReactDOM.render (
  
{عنوان} ،   document.getElementById ( 'التطبيق') )؛

استبدال الوحدة الساخنة في رد الفعل

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

npm تثبيت - حفظ ديف رد فعل الساخنة محمل

يجب عليك إضافة مزيد من التكوين إلى ملف تكوين Webpack الخاص بك.

webpack.config.js

const webpack = تتطلب ('webpack') ؛
module.exports = {
  الإدخال: './src/index.js' ،
  وحدة: {
    قواعد: [
      {
        اختبار: / \.(js|jsx)$/ ،
        استبعاد: / node_modules / ،
        استخدام: ['بابل لودر]]
      }
    ]
  }،
  حل: {
    الامتدادات: ['*'، '.js'، '.jsx']
  }،
  انتاج: {
    المسار: __dirname + '/ dist' ،
    publicPath: '/' ،
    اسم الملف: 'bundle.js'
  }،
  الإضافات: [
    حزمة الويب الجديدة. HotModuleReplacementPlugin ()
  ]،
  devServer: {
    contentBase: './dist' ،
    حار: صحيح
  }
}؛

بالإضافة إلى ذلك ، في ملف src / index.js ، يجب عليك تحديد أن إعادة التحميل الساخنة متوفرة ويجب استخدامها.

SRC / index.js

استيراد رد من "رد فعل" ؛
استيراد ReactDOM من 'react-dom' ؛
const title = 'My React Webpack Babel Setup'؛
ReactDOM.render (
  
{عنوان} ،   document.getElementById ( 'التطبيق') )؛
module.hot.accept ()؛

الآن يمكنك بدء تطبيقك مرة أخرى.

من مجلد الجذر:

npm البداية

حظا سعيدا وداعا وداعا. رد فعل سعيد ...

اقرأ هذه القصة في وقت لاحق من مجلة.

🗞 استيقظ كل صباح أحد أيام الأحد على أهم الأخبار والآراء والأخبار التقنية البارزة في الأسبوع في صندوق الوارد الخاص بك: احصل على النشرة الإخبارية الجديرة بالملاحظة>