React
एक बेसिक वेबपैक, प्रतिक्रिया और बैबल वातावरण को कैसे सेटअप करें
खोज…
टिप्पणियों
यह बिल्ड पाइपलाइन वास्तव में वह नहीं है जिसे आप "प्रोडक्शन रेडी" कहेंगे, लेकिन यह आपको उन चीजों को जोड़ने के लिए एक ठोस शुरुआत देता है, जिन्हें आप अपने द्वारा खोजे जा रहे विकास अनुभव को प्राप्त करने के लिए आवश्यक हैं। दृष्टिकोण जो कुछ लोग लेते हैं (कई बार खुद को भी शामिल करते हैं) येओमान.आईओ या कहीं और की पूरी तरह से निर्मित पाइपलाइन को लेना है और फिर वे उन चीजों को बंद कर देते हैं जब तक वे नहीं चाहते कि यह वहाँ की शैली के अनुरूप हो। इसमें कुछ भी गलत नहीं है, लेकिन शायद ऊपर दिए गए उदाहरण के साथ आप विपरीत दृष्टिकोण का विकल्प चुन सकते हैं और नंगे हड्डियों से निर्माण कर सकते हैं।
कुछ चीजें जिन्हें आप जोड़ना पसंद कर सकते हैं, वो हैं टेस्टिंग फ्रेमवर्क और कवरेज के आंकड़े जैसे कर्म जैसे मोचा या जैस्मीन। ESLint के साथ लाइनिंग। वेबपैक-देव-सर्वर में हॉट मॉड्यूल प्रतिस्थापन ताकि आप उस Ctrl + S, F5 विकास अनुभव प्राप्त कर सकें। इसके अलावा वर्तमान पाइपलाइन केवल देव मोड में निर्मित होती है, इसलिए उत्पादन निर्माण कार्य अच्छा होगा।
Gotchas!
webpack.config.js के संदर्भ गुण में सूचना हमने नोड पथ मॉड्यूल का उपयोग किया है webpack.config.js हम अपने पथ को परिभाषित करने के बजाय __dirname को स्ट्रिंग /src लिए परिभाषित कर __dirname क्योंकि यह विंडोज़ आगे स्लैश से नफरत करता है । तो समाधान को पार करने के लिए हमारी मदद करने के लिए संगत उपयोग लीवरेज नोड को पार करें।
Webpack.config.js गुणों की व्याख्या
प्रसंग
यह फ़ाइलपथ है जिसके लिए वेबपैक सापेक्ष फ़ाइल पथों को हल करने के लिए रूट पथ के रूप में उपयोग करेगा। इसलिए index.jsx में जहां हम require('./index.html') वह बिंदु वास्तव में src/ निर्देशिका में हल होता है क्योंकि हमने इसे इस संपत्ति में इस तरह परिभाषित किया है।
प्रवेश
जहां वेबपैक पहले समाधान को बंडल करना शुरू करता है। यही कारण है कि आप देखेंगे कि index.jsx में हम एक साथ समाधान की आवश्यकता और आयात के साथ सिलाई कर रहे हैं।
उत्पादन
यह वह जगह है जहां हम परिभाषित करते हैं कि वेबपैक को उन फ़ाइल फ़ाइलों को छोड़ देना चाहिए जो इसे बंडल करने के लिए मिली हैं। हमने उस फ़ाइल के लिए एक नाम भी निर्धारित किया है जिसमें हमारी बंडल जावास्क्रिप्ट और शैलियों को गिरा दिया जाएगा।
devServer
ये वेबपैक-देव-सर्वर के लिए विशिष्ट सेटिंग्स हैं। contentBase परिभाषित करता है कि सर्वर को कहां रूट करना चाहिए, हमने dist/ फोल्डर को हमारे आधार के रूप में परिभाषित किया है। port वह पोर्ट है जिसे सर्वर होस्ट किया जाएगा। open है जो वेबपैक-सर्वर को निर्देश देने के लिए प्रयोग किया जाता है कि वह सर्वर को खाली करने के बाद आपके लिए अपना डिफ़ॉल्ट ब्राउज़र खोलें।
मॉड्यूल> लोडर
यह वेबपैक का उपयोग करने के लिए एक मैपिंग को परिभाषित करता है ताकि यह पता चल सके कि विभिन्न फ़ाइलों को खोजने पर क्या करना है। test गुण वेबपैक के लिए रेगेक्स देता है ताकि यह निर्धारित किया जा सके कि यह मॉड्यूल लागू करना चाहिए, ज्यादातर मामलों में हम फाइल एक्सटेंशन पर मेल खाते हैं। loader या loaders लोडर मॉड्यूल का नाम देते हैं जिसका उपयोग हम फाइल को वेबपैक में लोड करने के लिए करना चाहते हैं और उस लोडर को उस फ़ाइल प्रकार के बंडल की देखभाल करने दें। जावास्क्रिप्ट पर एक query प्रॉपर्टी भी है, यह सिर्फ लोडर को एक क्वेरी स्ट्रिंग प्रदान करता है, इसलिए हम शायद html लोडर पर एक क्वेरी प्रॉपर्टी का उपयोग कर सकते थे, यदि हम चाहते थे। यह चीजों को करने का एक अलग तरीका है।
छवियों के साथ एक अनुकूलित "हैलो वर्ल्ड" के लिए एक पाइपलाइन का निर्माण कैसे करें।
चरण 1: Node.js स्थापित करें
आपके द्वारा निर्मित की जा रही पाइपलाइन का निर्माण Node.js में आधारित है, इसलिए आपको पहली बार में यह सुनिश्चित करना होगा कि आपने इसे स्थापित किया है। Node.js को कैसे स्थापित किया जाए, इस बारे में निर्देशों के लिए आप उसके लिए SO डॉक्स चेकआउट कर सकते हैं
चरण 2: एक नोड मॉड्यूल के रूप में अपनी परियोजना को प्रारंभ करें
कमांड लाइन पर अपना प्रोजेक्ट फ़ोल्डर खोलें और निम्न कमांड का उपयोग करें:
npm init
इस उदाहरण के प्रयोजनों के लिए आप डिफॉल्ट्स को लेने के लिए स्वतंत्र महसूस कर सकते हैं या यदि आप इस बारे में अधिक जानकारी चाहते हैं कि इसका मतलब क्या है तो आप पैकेज कॉन्फ़िगरेशन सेट करने पर इस एसओ डॉक्टर की जांच कर सकते हैं।
चरण 3: आवश्यक npm संकुल स्थापित करें
इस उदाहरण के लिए आवश्यक संकुल को स्थापित करने के लिए कमांड लाइन पर निम्न कमांड चलाएँ:
npm install --save react react-dom
फिर देव निर्भरताओं के लिए इस आदेश को चलाने:
npm install --save-dev babel-core babel-preset-react babel-preset-es2015 webpack babel-loader css-loader style-loader file-loader image-webpack-loader
अंत में वेबपैक और वेबपैक-देव-सर्वर ऐसी चीजें हैं जो आपके प्रोजेक्ट की निर्भरता के बजाय विश्व स्तर पर स्थापित करने के लायक हैं, अगर आप इसे एक निर्भरता के रूप में जोड़ना पसंद करेंगे तो वह काम करेगा, मैं नहीं। यहाँ चलाने के लिए आदेश है:
npm install --global webpack webpack-dev-server
चरण 3: अपने प्रोजेक्ट के मूल में एक .babelrc फ़ाइल जोड़ें
यह आपके द्वारा अभी स्थापित किए गए प्रीसेट का उपयोग करने के लिए बैबेल को सेटअप करेगा। आपकी .babelrc फ़ाइल को इस तरह दिखना चाहिए:
{
"presets": ["react", "es2015"]
}
चरण 4: सेटअप प्रोजेक्ट निर्देशिका संरचना
अपने आप को एक निर्देशिका स्टेचर तैयार करें जो आपकी निर्देशिका के मूल में नीचे की तरह दिखता है:
|- node_modules
|- src/
|- components/
|- images/
|- styles/
|- index.html
|- index.jsx
|- .babelrc
|- package.json
नोट: node_modules , .babelrc और package.json सभी को पहले से ही पिछले चरणों से होना चाहिए था मैंने उन्हें शामिल किया ताकि आप देख सकें कि वे कहाँ फिट होते हैं।
चरण 5: हैलो वर्ल्ड प्रोजेक्ट फ़ाइलों के साथ प्रोजेक्ट को पॉप्युलेट करें
यह पाइपलाइन बनाने की प्रक्रिया के लिए वास्तव में महत्वपूर्ण नहीं है, इसलिए मैं आपको केवल इनके लिए कोड दूंगा और आप इन्हें पेस्ट कर सकते हैं:
src / घटकों / HelloWorldComponent.jsx
import React, { Component } from 'react';
class HelloWorldComponent extends Component {
constructor(props) {
super(props);
this.state = {name: 'Student'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({name: e.target.value});
}
render() {
return (
<div>
<div className="image-container">
<img src="./images/myImage.gif" />
</div>
<div className="form">
<input type="text" onChange={this.handleChange} />
<div>
My name is {this.state.name} and I'm a clever cloggs because I built a React build pipeline
</div>
</div>
</div>
);
}
}
export default HelloWorldComponent;
src / images / myImage.gif
बेझिझक इसे किसी भी छवि के साथ स्थानापन्न करें जो आप चाहते हैं कि यह केवल इस बात को साबित करने के लिए है कि हम छवियों को भी बंडल कर सकते हैं। यदि आप अपनी स्वयं की छवि प्रदान करते हैं और आप इसे कुछ अलग नाम देते हैं तो आपको अपने परिवर्तनों को प्रतिबिंबित करने के लिए HelloWorldComponent.jsx को अपडेट करना होगा। समान रूप से यदि आप एक अलग फ़ाइल एक्सटेंशन के साथ एक छवि चुनते हैं तो आपको अपने नए फ़ाइल एक्सटेंशन से मिलान करने के लिए उचित regex के साथ webpack.config.js में छवि लोडर की test संपत्ति को संशोधित करने की आवश्यकता है।
src / शैलियों / styles.css
.form {
margin: 25px;
padding: 25px;
border: 1px solid #ddd;
background-color: #eaeaea;
border-radius: 10px;
}
.form div {
padding-top: 25px;
}
.image-container {
display: flex;
justify-content: center;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learning to build a react pipeline</title>
</head>
<body>
<div id="content"></div>
<script src="app.js"></script>
</body>
</html>
index.jsx
import React from 'react';
import { render } from 'react-dom';
import HelloWorldComponent from './components/HelloWorldComponent.jsx';
require('./images/myImage.gif');
require('./styles/styles.css');
require('./index.html');
render(<HelloWorldComponent />, document.getElementById('content'));
चरण 6: वेबपैक कॉन्फ़िगरेशन बनाएँ
अपनी परियोजना की जड़ में webpack.config.js नामक एक फ़ाइल बनाएँ और इस कोड को इसमें कॉपी करें:
webpack.config.js
var path = require('path');
var config = {
context: path.resolve(__dirname + '/src'),
entry: './index.jsx',
output: {
filename: 'app.js',
path: path.resolve(__dirname + '/dist'),
},
devServer: {
contentBase: path.join(__dirname + '/dist'),
port: 3000,
open: true,
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: "style!css"
},
{
test: /\.gif$/,
loaders: [
'file?name=[path][name].[ext]',
'image-webpack',
]
},
{ test: /\.(html)$/,
loader: "file?name=[path][name].[ext]"
}
],
},
};
module.exports = config;
चरण 7: अपनी पाइपलाइन के लिए npm कार्य बनाएं
ऐसा करने के लिए आपको अपने प्रोजेक्ट के रूट में पैकेज.जॉन फ़ाइल में परिभाषित JSON की स्क्रिप्ट कुंजी में दो गुण जोड़ने होंगे। अपनी स्क्रिप्ट को इस तरह बनाएं:
"scripts": {
"start": "webpack-dev-server",
"build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
test स्क्रिप्ट पहले से ही मौजूद है और आप यह चुन सकते हैं कि इसे रखना है या नहीं, यह इस उदाहरण के लिए महत्वपूर्ण नहीं है।
चरण 8: पाइपलाइन का उपयोग करें
कमांड लाइन से, यदि आप प्रोजेक्ट रूट डायरेक्टरी में हैं तो अब आपको कमांड चलाने में सक्षम होना चाहिए:
npm run build
यह आपके द्वारा बनाए गए छोटे अनुप्रयोग को बंडल करेगा और इसे दूर dist/ निर्देशिका में रखेगा जो इसे आपके प्रोजेक्ट फ़ोल्डर की जड़ में बनाएगा।
यदि आप कमांड चलाते हैं:
npm start
फिर आपके द्वारा बनाया गया एप्लिकेशन आपके डिफ़ॉल्ट वेब ब्राउज़र में वेबपैक देव सर्वर उदाहरण के अंदर परोसा जाएगा।