استخدام Babel و Webpack لإعداد مشروع React من البداية

هناك العديد من الأدوات المتاحة لإعداد البيئة لتطوير React. على سبيل المثال ، يستخدم البرنامج التعليمي React الخاص بنا أداة create-react-app لإنشاء مشروع قالب يحتوي على كل ما تحتاجه لتطوير تطبيقات React. يريد مؤلف المقال ، الذي ننشر ترجمته اليوم ، التحدث حول كيفية تكوين البيئة بشكل مستقل لتطوير مشاريع React باستخدام Babel و Webpack. تُستخدم هذه الأدوات أيضًا في المشروعات التي تم إنشاؤها باستخدام أدوات إنشاء رد فعل التطبيق ، ونعتقد أن أي شخص يدرس تطوير React سيكون مهتمًا بالتعرف عليهم ومع منهجية إنشاء مشاريع React على مستوى أعمق. أي ، سوف نتحدث عن كيفية تكوين Webpack بحيث تستخدم هذه الأداة بابل لتجميع كود JSX في كود JavaScript ، وكيفية تكوين الخادم المستخدم لتطوير مشاريع React.

Webpack

Webpack يستخدم لتجميع وحدات جافا سكريبت. غالبًا ما تسمى هذه الأداة "المجمّع" (من المجمّع) أو "منشئ الوحدات النمطية". بعد تثبيته ، يمكنك العمل معه باستخدام واجهة سطر الأوامر أو واجهة برمجة التطبيقات . إذا لم تكن معتادًا على Webpack ، فمن المستحسن أن تقرأ عن المبادئ الأساسية لتشغيلها وترى المقارنة مع منشئي الوحدات الأخرى. إليك ما يشبه Webpack ، على مستوى عالٍ.


Webpack العمل

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

بابل

Babel عبارة عن محوِّل ، يستخدم بشكل رئيسي لتحويل الإنشاءات المعتمدة في الإصدارات الأخيرة من معيار ECMAScript إلى تنسيق يمكن فهمه لكل من المتصفحات الحديثة وليس أحدث المتصفحات والبيئات الأخرى التي يمكن تشغيل JavaScript فيها. يمكن لـ Babel ، بالإضافة إلى ذلك ، التحويل إلى كود JavaScript و JSX باستخدام @ babel / preset-react .


بابل

بفضل Babel ، يمكننا ، عند تطوير تطبيقات React ، استخدام JSX. على سبيل المثال ، إليك الرمز الذي يستخدم JSX:

import React from "react"; function App(){ return(  <div>     <b>Hello world!</b>  </div> ) } export default App; 

يبدو هذا الرمز أنيقًا ، فمن الواضح أنه سهل القراءة والتحرير. عند النظر إليه ، يمكنك أن تفهم على الفور أنه يصف مكونًا يُرجع عنصر <div> يحتوي على نص Hello world! بالخط العريض وهنا مثال على الكود الذي يفعل نفس الشيء الذي لا يستخدم فيه JSX:

 "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); var _react = require("react"); var _react2 = _interopRequireDefault(_react); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function App(props) { return _react2.default.createElement(   "div",   null,   _react2.default.createElement(     "b",     null,     "Hello world!"   ) ); } exports.default = App; 

مزايا المثال الأول على الثانية واضحة.

المتطلبات الأساسية

من أجل إعداد مشروع تطبيق React ، سنحتاج إلى وحدات npm التالية.

• رد فعل - مكتبة رد الفعل.
• react-dom هي مكتبة ستساعدنا على استخدام قدرات React في المتصفح.
• بابل / الأساسية - JSX transpilation في JS.
• babel / preset-env - إنشاء رمز مناسب للمتصفحات القديمة.
• babel / preset-react - تكوين transpiler للعمل مع React code.
• babel-loader - تكوين Webpack للعمل مع Babel.
• css-loader - إعداد Webpack للعمل مع CSS.
• webpack - تجميع الوحدات.
• webpack-cli - العمل مع Webpack من سطر الأوامر.
• style-loader - تحميل كل كود CSS المستخدم في رأس ملف HTML.
• webpack-dev-server - إعداد خادم تطوير.

قم الآن بإنشاء ، في مجلد react-scratch ، مشروع جديد باستخدام npm ( npm init ) وتثبيت بعض الحزم أعلاه بالأمر التالي:

 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader webpack webpack-cli style-loader webpack-dev-server 

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


هيكل المشروع

يمكن العثور على المشروع النهائي ، والذي سنتعامل معه هنا ، في هذا المستودع.

سيحتوي مجلد component على مكونات المشروع (في حالتنا ، يوجد مكون واحد فقط هنا). في مجلد dist ، في ملف main.js ، سيتم تحديد الكود main.js ، و index.html ، كما ذكرنا سابقًا ، هو ملف HTML الرئيسي main.js .

إعداد Webpack

يمكن تكوين Webpack بعدة طرق. على وجه الخصوص ، يمكن أن تأخذ إعدادات هذه الأداة شكل وسيطات سطر الأوامر أو أن تكون موجودة في المشروع كملف تكوين باسم webpack.config.js . في ذلك ، تحتاج إلى وصف وتصدير الكائن الذي يحتوي على الإعدادات. سنبدأ في إعداد هذا الملف مع وصف للكائن الذي يشبه هذا (سننظر فيه في أجزاء ، وسنقدم أدناه الرمز الكامل):

 { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, } 

تقوم خاصية entry بتعيين الملف الرئيسي برمز مصدر المشروع. تشير قيمة خاصية mode إلى نوع البيئة المراد تجميعها (في حالتنا ، هذه هي بيئة development ) ومكان وضع الملف المترجم.

عمل المشروع

ضع الكود التالي في ملف index.html ، الموجود في المجلد dist :

 <!DOCTYPE html> <html lang="en" dir="ltr"> <head>   <meta charset="utf-8">   <title>React From Scratch</title> </head> <body>   <div id="root">   </div> </body> <script type="text/javascript" src="main.js"> </script> </html> 

انتبه لعلامة script الموجودة في هذا الملف. يشير إلى ملف main.js ، والذي سيتم الحصول عليه أثناء تجميع المشروع. سنستخدم العنصر <div> مع معرف root لعرض تطبيق React.

الآن تثبيت حزم رد فعل و رد فعل دوم:

 npm install react react-dom 

أضف الكود التالي إلى index.js :

 import React, { Component } from "react"; import ReactDOM from "react-dom"; import App from "./component/app.component"; ReactDOM.render(<App />, document.querySelector("#root")); 

هذا هو الكود القياسي لملفات تطبيق React هذه. نقوم هنا بتوصيل المكتبات وتوصيل ملف المكون وعرض التطبيق في علامة <div> بمعرف root .

إليك رمز ملف app.component.js :

 import React, { Component } from "react"; import s from "./app.component.css"; class MyComponent extends Component { render() {   return <div className={s.intro}>Hello World</div>; } } export default MyComponent; 

فيما يلي رمز ملف app.component.css :

 .intro { background-color: yellow; } 

تكوين بابل

بابل هي شركة نقل ذات إمكانات كبيرة. على وجه الخصوص ، يمكنه تحويل LESS إلى CSS و JSX إلى JS و TypeScript إلى JS. سنستخدم تكوينين فقط به - رد فعل و env (يطلق عليهما أيضًا "إعدادات مسبقة"). يمكن تكوين بابل بطرق مختلفة ، على وجه الخصوص ، نحن نتحدث عن أدوات سطر الأوامر ، وملف إعدادات خاصة ، وملف package.json القياسي. نحن راضون عن الخيار الأخير. أضف القسم التالي إلى package.json :

 "babel": {   "presets": [     "@babel/env",     "@babel/react"   ] } 

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

إعداد Webpack للعمل مع بابل

هنا سنستخدم مكتبة babel-loader ، والتي تسمح لك باستخدام Babel مع Webpack. في الحقيقة ، النقطة المهمة هي أن بابل سيكون قادرًا على اعتراض الملفات ومعالجتها قبل معالجتها بواسطة Webpack.

ملفات SJS

فيما يلي القواعد المتعلقة بالعمل مع ملفات JS (هذا الرمز سينتقل إلى ملف webpack.config.js ) ، فهي تمثل إحدى خصائص كائن الإعدادات الذي تم تصديره بواسطة هذا الملف:

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },   ] } 

يتم تخزين مجموعة من القواعد في خاصية قواعد الكائن الممثلة هنا ، والتي بموجبها يجب معالجة الملف المحدد بواسطة التعبير العادي الموصوف في خاصية test . في هذه الحالة ، سيتم تطبيق القاعدة على جميع الملفات ذات الامتدادات .m و .js ، ولا نريد node_modules الملفات من مجلد node_modules و bower_components . علاوة على ذلك ، هنا نشير إلى أننا نريد استخدام بابل لودر. بعد ذلك ، ستتم معالجة ملفات JS الخاصة بنا بواسطة بابل أولاً ثم تعبئتها باستخدام Webpack.

ملفات CSS

أضف الإعدادات لمعالجة ملفات CSS إلى صفيف rules كائن module :

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },  ] } 

سنقوم بحل مهمة معالجة ملفات CSS باستخدام style-loader و css-loader. يمكن أن تقبل خاصية use مجموعة من الكائنات أو السلاسل. تسمى اللوادر ، بدءًا من الأخيرة ، لذا ستتم معالجة ملفاتنا أولاً باستخدام css-loader. قمنا بتكوين هذه الأداة عن طريق كتابة true في خاصية modules لكائن options . بفضل هذا ، سيتم تطبيق أنماط CSS فقط على تلك المكونات التي يتم استيرادها إليها. سيسمح Css-loader بأوامر الاستيراد في ملفات CSS ، وبعد ذلك سوف يضيف style-loader ما اتضح في شكل علامة style في قسم <head> بالصفحة:

 <style> <--  css --> </style> 

atic الموارد الساكنة

سنستمر في العمل على كائن إعدادات module ، مع وصف قواعد معالجة الموارد الثابتة فيه:

 module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] } 

إذا واجه النظام ملفًا بالامتداد PNG أو SVG أو JPG أو GIF ، فسيتم استخدام أداة تحميل الملفات لمعالجة هذا الملف. تعد معالجة هذه الملفات مهمة للإعداد الأمثل للمشروع وتحسينه.

إعداد خادم التطوير

الآن ، في ملف webpack.config.js ، قم بتكوين خادم التطوير:

 devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true }, 

contentBase خاصية contentBase devServer إعدادات contentBase إلى المجلد الذي توجد به مواردنا وملف index.html . تتيح لك خاصية port تحديد المنفذ الذي سيستمع إليه الخادم. تسمح خاصية watchContentBase بمراقبة التغييرات في الملفات الموجودة في المجلد المحدد بواسطة خاصية contentBase .

فيما يلي الرمز الكامل لملف webpack.config.js :

 const path = require("path"); module.exports = { entry: "./src/index.js", mode: "development", output: {   filename: "./main.js" }, devServer: {   contentBase: path.join(__dirname, "dist"),   compress: true,   port: 9000,   watchContentBase: true,   progress: true }, module: {   rules: [     {       test: /\.m?js$/,       exclude: /(node_modules|bower_components)/,       use: {         loader: "babel-loader"       }     },     {       test: /\.css$/,       use: [         "style-loader",         {           loader: "css-loader",           options: {             modules: true           }         }       ]     },     {       test: /\.(png|svg|jpg|gif)$/,       use: ["file-loader"]     }   ] } }; 

سنضيف الآن إلى package.json ، في قسم scripts ، الأمر لبدء تشغيل خادم التطوير والأمر لبدء بناء المشروع:

 "scripts": {   "dev": "webpack-dev-server",   "start": "webpack" }, 

كل شيء جاهز الآن لبدء تشغيل خادم التطوير باستخدام الأمر التالي:

 npm run dev 

إذا انتقلت الآن إلى العنوان http: // localhost: 9000 ، يمكنك رؤية صفحة مشروعنا.


صفحة المشروع في المتصفح

لبناء مشروع ، استخدم الأمر التالي:

 npm run start 

بعد ذلك ، يمكنك فتح ملف index.html في المستعرض ورؤية نفس الشيء الذي يمكن أن تراه من خلال بدء تشغيل خادم التطوير والانتقال إلى العنوان http: // localhost: 9000 .

ملخص

توفر هذه المقالة نظرة عامة حول إعداد Webpack و Babel للاستخدام في مشاريع React. في الواقع ، يمكن إنشاء تكوينات أكثر تعقيدًا على الأساس الذي انفصلنا عنه اليوم. على سبيل المثال ، بدلاً من CSS ، يمكنك استخدام LESS ، بدلاً من JS العادي ، اكتب في TypeScript. إذا لزم الأمر ، يمكنك ، على سبيل المثال ، تكوين تصغير الملف وغير ذلك الكثير. بطبيعة الحال ، إذا كان اليوم هو أول من تعرفك على عملية إعداد مشاريع React بمفردك ، فقد يبدو لك أن كل هذا صعب للغاية وأنه من الأسهل بكثير استخدام قالب جاهز. ومع ذلك ، بعد إدراكها قليلاً ، ستدرك أن الزيادة الطفيفة في تعقيد الإعدادات تمنحك مزيدًا من الحرية ، مما يسمح لك بتخصيص مشاريعك بالطريقة التي تحتاجها تمامًا ، دون الاعتماد تمامًا على بعض الحلول "القياسية" وتقليل اعتمادك على لهم.

أعزائي القراء! ما هي الطريقة التي تستخدمها غالبًا عند إعداد بيئة عملك لمشاريع React؟