स्क्रैच से एक रिएक्ट प्रोजेक्ट स्थापित करने के लिए बैबेल और वेबपैक का उपयोग करना

प्रतिक्रिया विकास के लिए वातावरण तैयार करने के लिए कई उपकरण उपलब्ध हैं। उदाहरण के लिए, हमारा रिएक्ट ट्यूटोरियल एक टेम्पलेट प्रोजेक्ट बनाने के लिए क्रिएट-रिएक्शन-ऐप टूल का उपयोग करता है जिसमें रिएक्ट एप्लिकेशन को विकसित करने के लिए आवश्यक सब कुछ होता है। लेख के लेखक, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, इस बारे में बात करना चाहता है कि बेबिल और वेबपैक का उपयोग करके रिएक्ट परियोजनाओं को विकसित करने के लिए पर्यावरण को स्वतंत्र रूप से कैसे कॉन्फ़िगर किया जाए। इन उपकरणों का उपयोग create-react-app टूल का उपयोग करके बनाई गई परियोजनाओं में भी किया जाता है, और हम मानते हैं कि जो कोई भी रिएक्ट विकास का अध्ययन करता है, उन्हें जानने में रुचि होगी और एक गहन स्तर पर रिएक्ट प्रोजेक्ट बनाने के लिए कार्यप्रणाली के साथ। अर्थात्, हम बात करेंगे कि वेबपैक को कैसे कॉन्फ़िगर किया जाए ताकि यह उपकरण जेएसएक्स कोड को जावास्क्रिप्ट कोड में संकलित करने के लिए बैबेल का उपयोग करे, और रिएक्ट परियोजनाओं को विकसित करने के लिए उपयोग किए जाने वाले सर्वर को कैसे कॉन्फ़िगर किया जाए।

Webpack

वेबपैक का उपयोग जावास्क्रिप्ट मॉड्यूल को संकलित करने के लिए किया जाता है। इस टूल को अक्सर "बंडलर" (बंडलर से) या "मॉड्यूल बिल्डर" कहा जाता है। इसे स्थापित करने के बाद, आप कमांड लाइन इंटरफ़ेस या इसके एपीआई का उपयोग करके इसके साथ काम कर सकते हैं। यदि आप वेबपैक से परिचित नहीं हैं, तो यह अनुशंसा की जाती है कि आप इसके संचालन के मूल सिद्धांतों के बारे में पढ़ें और अन्य मॉड्यूल बिल्डरों के साथ इसकी तुलना देखें। यहाँ क्या है, उच्च स्तर पर, वेबपैक क्या दिखता है।


वेबपैक का काम

वेबपैक सब कुछ लेता है जो परियोजना पर निर्भर करती है और इसे स्थिर संसाधनों में परिवर्तित करती है जिसे क्लाइंट को हस्तांतरित किया जा सकता है। एप्लिकेशन पैकेजिंग बहुत महत्वपूर्ण है, क्योंकि अधिकांश ब्राउज़र संसाधनों को एक साथ डाउनलोड करने की क्षमता को सीमित करते हैं। इसके अलावा, यह आपको क्लाइंट को केवल वही भेजकर ट्रैफिक को बचाने की अनुमति देता है जो उसे चाहिए। विशेष रूप से, वेबपैक एक आंतरिक कैश का उपयोग करता है, जिसके कारण मॉड्यूल क्लाइंट को केवल एक बार डाउनलोड किया जाता है, जिसके परिणामस्वरूप, साइटों की तेजी से लोड हो रहा है।

कोलाहल

बैबेल एक ट्रांसपिलर है, जिसका उपयोग मुख्य रूप से ECMAScript मानक के हालिया संस्करणों में अपनाए गए निर्माणों को एक ऐसे प्रारूप में परिवर्तित करने के लिए किया जाता है, जो आधुनिक और न कि नवीनतम ब्राउज़रों और अन्य वातावरणों के लिए समझा जा सकता है जिसमें जावास्क्रिप्ट चलाया जा सकता है। इसके अलावा, बैबेल, @ बेबल / प्रीसेट-रिएक्शन का उपयोग करके जावास्क्रिप्ट और जेएसएक्स कोड में परिवर्तित हो सकता है।


कोलाहल

बैबेल के लिए धन्यवाद, हम, रिएक्ट एप्लिकेशन विकसित करते समय, 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; 

दूसरे पर पहले उदाहरण के फायदे स्पष्ट हैं।

आवश्यक शर्तें

रिएक्ट एप्लिकेशन प्रोजेक्ट स्थापित करने के लिए, हमें निम्नलिखित एनपीएम मॉड्यूल की आवश्यकता होगी।

• प्रतिक्रिया - प्रतिक्रिया पुस्तकालय।
• प्रतिक्रिया-डोम एक पुस्तकालय है जो ब्राउज़र में रिएक्ट की क्षमताओं का उपयोग करने में हमारी मदद करेगा।
• बेबल / कोर - JSX में JSX ट्रांसप्लिकेशन
• babel / preset -env - पुराने ब्राउज़रों के लिए उपयुक्त कोड बनाएँ।
• बैबेल / प्रीसेट-रिएक्शन - रिएक्टर कोड के साथ काम करने के लिए ट्रांसपायलर को कॉन्फ़िगर करें
• बैबल-लोडर - बेबेल के साथ काम करने के लिए वेबपैक कॉन्फ़िगर करें।
• सीएसएस-लोडर - सीएसएस के साथ काम करने के लिए वेबपैक स्थापित करना।
• webpack - मॉड्यूल की विधानसभा।
• webpack-cli - कमांड लाइन से Webpack के साथ काम करते हैं।
• स्टाइल-लोडर - HTML-फाइल के हेडर में सभी उपयोग किए गए CSS-code को लोड करना।
• 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 फ़ाइल में, संकलित कोड स्थित होगा, और index.html है, जैसा कि पहले ही उल्लेख किया गया है, हमारे आवेदन की मुख्य HTML फ़ाइल है।

वेबपैक सेटअप

वेबपैक को कई तरीकों से कॉन्फ़िगर किया जा सकता है। विशेष रूप से, इस टूल की सेटिंग्स कमांड लाइन के तर्कों का रूप ले सकती हैं या प्रोजेक्ट में webpack.config.js नाम की कॉन्फ़िगरेशन फ़ाइल के रूप में मौजूद हो webpack.config.js । इसमें, आपको सेटिंग्स युक्त ऑब्जेक्ट का वर्णन और निर्यात करने की आवश्यकता है। हम इस फ़ाइल को इस तरह दिखने वाली वस्तु के विवरण के साथ स्थापित करना शुरू करेंगे (हम इसे भागों में विचार करेंगे, और नीचे हम इसका पूरा कोड देंगे):

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

entry प्रॉपर्टी प्रोजेक्ट सोर्स कोड के साथ मुख्य फाइल सेट करती है। mode गुण का मान संकलित करने के लिए पर्यावरण के प्रकार को इंगित करता है (हमारे मामले में, यह development वातावरण है) और संकलन फ़ाइल को कहां रखा जाए।

प्रोजेक्ट का काम

निम्नलिखित कोड को हमारी परियोजना के index.html में रखें।

 <!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 फ़ाइल को main.js करता है, जो परियोजना के संकलन के दौरान प्राप्त किया जाएगा। हम प्रतिक्रिया अनुप्रयोग प्रदर्शित करने के लिए root पहचानकर्ता के साथ <div> तत्व का उपयोग करेंगे।

अब प्रतिक्रिया और प्रतिक्रिया-प्रधान पैकेज स्थापित करें:

 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")); 

यह इस तरह के रिएक्ट एप्लिकेशन फ़ाइलों के लिए मानक कोड है। यहां हम पुस्तकालयों को जोड़ते हैं, घटक फ़ाइल को कनेक्ट करते हैं और root पहचानकर्ता के साथ <div> में एप्लिकेशन प्रदर्शित करते हैं।

यहाँ 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 to JS, टाइपस्क्रिप्ट से JS में बदल सकता है। हम इसके साथ केवल दो कॉन्फ़िगरेशन का उपयोग करेंगे - प्रतिक्रिया और एनवी (उन्हें "प्रीसेट" भी कहा जाता है)। बैबल को विभिन्न तरीकों से कॉन्फ़िगर किया जा सकता है, विशेष रूप से, हम कमांड लाइन टूल के बारे में बात कर रहे हैं, एक विशेष सेटिंग्स फ़ाइल के बारे में, मानक package.json फ़ाइल के बारे में। हम अंतिम विकल्प से संतुष्ट हैं। निम्न अनुभाग को package.json जोड़ें:

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

इन सेटिंग्स के लिए धन्यवाद, बैबेल को पता चल जाएगा कि उन्हें कौन से प्रीसेट का उपयोग करना है। अब Babel का उपयोग करने के लिए Webpack को कॉन्फ़िगर करें।

बेबेल के साथ काम करने के लिए वेबपैक स्थापित करना

यहां हम बेबल-लोडर लाइब्रेरी का उपयोग करेंगे, जो आपको वेबपैक के साथ बैबेल का उपयोग करने की अनुमति देता है। वास्तव में, मुद्दा यह है कि बैबेल वेबपैक द्वारा संसाधित होने से पहले फाइलों को इंटरसेप्ट और प्रोसेस करने में सक्षम होंगे।

FilesJS फाइलें

यहाँ JS फ़ाइलों के साथ काम करने के बारे में नियम दिए गए हैं (यह कोड webpack.config.js फ़ाइल में जाएगा), वे इस फ़ाइल द्वारा निर्यात सेटिंग्स ऑब्जेक्ट के गुणों में से एक का प्रतिनिधित्व करते हैं:

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

नियमों का एक सरणी यहां दर्शाई गई वस्तु की नियमों की संपत्ति में संग्रहीत है, जिसके अनुसार test संपत्ति में वर्णित नियमित अभिव्यक्ति द्वारा निर्दिष्ट फ़ाइल को संसाधित किया जाना चाहिए। इस स्थिति में, नियम सभी फाइलों पर एक्सटेंशन .m और .js साथ लागू किया जाएगा, जबकि हम फ़ोल्डर node_modules और bower_components से फ़ाइलों को node_modules नहीं करना चाहते हैं। इसके अलावा, यहाँ हम इंगित करते हैं कि हम बेबल-लोडर का उपयोग करना चाहते हैं। उसके बाद, हमारी जेएस फाइलें पहले बेबल द्वारा संसाधित की जाएंगी और फिर वेबपैक का उपयोग करके पैक की जाएगी।

▍CSS फाइलें

module ऑब्जेक्ट के rules सरणी में CSS फ़ाइलों को संसाधित करने के लिए सेटिंग्स जोड़ें:

 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           }         }       ]     },  ] } 

हम स्टाइल-लोडर और सीएसएस-लोडर का उपयोग करके सीएसएस फाइलों को संसाधित करने का कार्य हल करेंगे। use संपत्ति वस्तुओं या तारों की एक सरणी को स्वीकार कर सकती है। लोडर कहा जाता है, आखिरी से शुरू होता है, इसलिए हमारी फाइलों को पहले सीएसएस-लोडर के साथ संसाधित किया जाएगा। हमने options ऑब्जेक्ट के modules गुण में true लिखकर इस टूल को कॉन्फ़िगर किया है। इसके लिए धन्यवाद, CSS शैलियों को केवल उन घटकों पर लागू किया जाएगा जिनमें वे आयात किए गए हैं। सीएसएस-लोडर सीएसएस फाइलों में आयात आदेशों की अनुमति देगा, जिसके बाद शैली-लोडर यह जोड़ देगा कि यह पृष्ठ के <head> अनुभाग में style टैग के रूप में क्या निकलता है:

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

ResourcesStatic संसाधन

हम 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"]     }   ] } 

अगर सिस्टम एक फाइल का विस्तार पीएनजी, एसवीजी, जेपीजी या जीआईएफ के साथ करता है, तो ऐसी फाइल को संसाधित करने के लिए फाइल-लोडर का उपयोग किया जाएगा। परियोजना की उचित तैयारी और अनुकूलन के लिए ऐसी फाइलों का प्रसंस्करण महत्वपूर्ण है।

एक विकास सर्वर स्थापित करना

अब, webpack.config.js फ़ाइल में, विकास सर्वर को कॉन्फ़िगर करें:

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

contentBase सेटिंग्स devServer का contentBase गुण उस फ़ोल्डर को इंगित करता है जिसमें हमारे संसाधन और index.html फ़ाइल स्थित हैं। port संपत्ति आपको उस पोर्ट को निर्दिष्ट करने की अनुमति देती है जो सर्वर पर सुनेंगे। watchContentBase गुण watchContentBase गुण द्वारा निर्दिष्ट फ़ोल्डर में फ़ाइलों में परिवर्तन की निगरानी करने की अनुमति देता है।

यहाँ 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 पर जाकर देख सकते हैं।

परिणाम

यह आलेख प्रतिक्रिया परियोजनाओं में उपयोग के लिए वेबपैक और बैबेल की स्थापना का अवलोकन प्रदान करता है। वास्तव में, इस आधार पर बहुत अधिक जटिल विन्यास बनाए जा सकते हैं जिन्हें हमने आज अलग किया है। उदाहरण के लिए, सीएसएस के बजाय, आप नियमित जेएस के बजाय LESS का उपयोग कर सकते हैं, टाइपस्क्रिप्ट में लिखें। यदि आवश्यक हो, तो आप, उदाहरण के लिए, फाइल मिनिफिकेशन और बहुत कुछ कॉन्फ़िगर कर सकते हैं। बेशक, अगर आज आपका पहला परिचित स्वयं-ट्यूनिंग प्रतिक्रिया-परियोजनाओं की प्रक्रिया के साथ हुआ, तो आप सोच सकते हैं कि यह सब तैयार किए गए टेम्पलेट का उपयोग करने के लिए बहुत मुश्किल और बहुत आसान है। हालाँकि, जब आप इसे थोड़ा समझ लेते हैं, तो आप महसूस करेंगे कि सेटिंग्स की जटिलता में थोड़ी सी वृद्धि आपको और अधिक स्वतंत्रता देती है, जिससे आप अपनी परियोजनाओं को ठीक उसी तरह से अनुकूलित कर सकते हैं, जिस तरह से आपको इसकी आवश्यकता है, बिना कुछ "मानक" समाधानों पर पूरी तरह से भरोसा करते हुए और अपनी निर्भरता को कम करते हुए। उन्हें।

प्रिय पाठकों! प्रतिक्रिया परियोजनाओं के लिए अपने काम के माहौल को तैयार करते समय आप सबसे अधिक बार किस दृष्टिकोण का उपयोग करते हैं?