🔊 👩🏾‍🔬 👞 कैसे ग्रीन जूनियर ने अपना हॉट-रीलोडर लिखा 👨🏼‍⚖️ 🛌 👨‍💼

प्रागितिहास

लेखक के स्तर की सामान्य समझ और समस्या के हल के लिए मेरे बारे में कुछ पंक्तियाँ।

मेरा नाम यूजीन है और मैं एक ~~वेब डेवलपर~~ ग्रीन जूनियर फ्रंटेंड डेवलपर हूं।
कुछ और साल पहले, मैंने पूरी तरह से अलग क्षेत्र में काम किया और केवल सिद्धांत में अपने पेशे को बदलने के बारे में सोचा, लेकिन दिसंबर 2018 के आसपास मैंने अपना रास्ता खोज लिया और अभिनय करना शुरू कर दिया।
कुल प्रशिक्षण के लगभग छह महीने के बाद, मुझे एक फ्रंटएंड प्रोग्रामर के रूप में नौकरी मिलती है। मैंने मौलिक चीजें सीखी हैं (मैं ऐसा सोचना चाहता हूं), js, DOM के साथ बातचीत, प्रतिक्रिया + redux। HTML और CSS कम से कम + बूटस्ट्रैप और असेंबली की एक सामान्य समझ, git, कमांड लाइन के साथ काम करना।
सिद्धांत के अलावा, प्रशिक्षण परियोजनाओं के एक जोड़े को बनाया गया है, जिसमें प्रतिक्रिया + रिड्यूक्स पर एक चैट, साथ ही साथ उनके कुछ विचारों को लागू करने का प्रयास भी शामिल है।
सामान्य तौर पर, इस तरह के एक मानक आधुनिक सज्जन शुरुआत के लिए सेट हैं।
पहले हफ्ते और एक आधे में मैंने एक वर्चुअल मशीन स्थापित की, इसमें बहुत कुछ है और सब कुछ मेरे लिए अपरिचित और समझ से बाहर है।
इस प्रक्रिया में, मैं नए उपकरणों और प्रौद्योगिकियों से परिचित हो जाता हूं: डेटाबेस के साथ (और "सीखो" सूची में खुद को एक और बुकमार्क रखो), पोटीन, विंडस्क्रीन आदि।
सफलतापूर्वक इस बाधा कोर्स को पास करें और मोर्चे पर जाएं।

प्रस्तावना

पहले से ही अपने रीलोडर और इस लेख को लिखने के बाद, मुझे हेब्रा पर लोगों सहित एनालॉग्स मिले। हालांकि, उन्होंने अपनी बाइक प्रकाशित करने का फैसला किया।

शुरुआत

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

एक सकारात्मक धारणा यह है कि परियोजना को अच्छी तरह से लिखा गया था, स्पष्ट रूप से सीधे हथियारों वाले लोगों द्वारा। उत्कृष्ट स्पष्ट नामकरण के साथ चर, संरचना हर जगह समान है और सामान्य तौर पर पूरे तर्क बहुत सुलभ और बस व्यक्त किए जाते हैं।

लेकिन पर्याप्त minuses हैं।

पहली समस्या: परियोजना का निर्माण कुछ प्राचीन न्यूनतर द्वारा किया जा रहा है, और आधुनिक जेएस सिंटैक्स का उपयोग करना असंभव है। कोई नहीं () => {}, कॉन्स्ट रेस = [... डेटा, सबऑन], async / प्रतीक्षा ...

दूसरी समस्या: न तो वेबपैक है, न ही कम से कम गल्प, और तदनुसार कोई वेबपैक-देव-सर्वर भी नहीं है, जो मुझे अपने उत्कृष्ट हॉट लोड के साथ परिचित करता है।

मैंने लिखा। बनाए रखा। F5। असहज। दर्द? प्रत्यक्ष दर्द नहीं, लेकिन बहुत असहज।

तीसरी समस्या: प्रोजेक्ट का निर्माण .bat फ़ाइल, जिसमें प्रोजेक्ट का कुछ भाग कॉपी किया गया है, पुस्तकालयों के हिस्से को बिना न्यूनतम किए एकत्र किया जाता है, एक फ़ाइल में भाग को छोटा किया जाता है, बाकी प्रोजेक्ट फ़ाइलों को दूसरे में डाला जाता है। तीसरी फ़ाइल में पुस्तकालयों की सूची। चौथे में बनाने के लिए फ़ाइलों की सूची। और इसी तरह।

चौथी समस्या: सभी पुस्तकालयों बड़े करीने से लिबर फ़ोल्डर में हैं और index.html में एक स्क्रिप्ट द्वारा जुड़े हुए हैं। इसके लिए एक्सप्रेस और प्रॉक्सी को छोड़कर सभी-सभी (वे विधानसभा में शामिल नहीं हैं, लेकिन केवल विकास के लिए)।
और हर जगह से संस्करण या एक विशिष्ट पुस्तकालय के संकेत हैं।

मैं कार्यशील प्रोग्रामिंग की एक सुंदर दुनिया में प्रशिक्षण में रहता था, es6 +, webpack-dev-server, tdd, eslint, automatic build वगैरह से भरा हुआ।

और यहाँ वयस्क दुनिया में, सब कुछ पूरी तरह से अलग है ...

टाई

लेकिन मुझे काम करना पसंद है, मैं बाधाओं को आत्म-विकास के अवसरों के रूप में मानता हूं, कंपनी अच्छी है, वातावरण उत्कृष्ट है, मेरी आंखों में आग है!

काम के घंटों में मैं काम के कामों को अंजाम देता हूं, अपने खाली समय में मैं कुछ सुधारने की कोशिश करता हूं।

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

मैं छोटे से शुरू करने का फैसला करता हूं - मैं बैबेल के माध्यम से नए वाक्यविन्यास को जोड़ता हूं। मैं अपने जादुई बिल्ड.बैट में बाबेल द्वारा प्रारंभिक प्रसंस्करण को जोड़ता हूं, लेकिन कुछ बेकार और हमारे पुराने मिनिलेटर को ठोकर मारता है। मैं एक समस्या की तलाश में हूं।

साफ-सुथरे डैडी लिबास में से एक लाइब्रेरी पर ठोकर खाता है। मैं लाइब्रेरी फ़ाइलों को देखता हूं: वे पहले से ही पुराने सिंटैक्स में खनन किए जाते हैं।

मैं कहता हूँ - "तुम यहाँ मत जाओ ... सिर को कोड मिलेगा, यह वास्तव में बुरा होगा।" मैं जाँच करता हूँ: सब कुछ काम करता है! हुर्रे! अब मेरे पास उन सभी अच्छे नए स्टाइलिश ट्रेंडी युवा चीजों की पहुंच है! पहली जीत। अच्छा लगा। मुझे लगता है कि इस मौके पर स्क्रिप्ट का नाम बदलकर e.bat (ई-एवेंज) में रखा जा सकता है, लेकिन यह तय नहीं किया जा सकता।

नया वाक्य-विन्यास इतना परिचित और आनंददायक है, लेकिन एक कुटिल निर्माण के बारे में सोचा जाना मुझे नहीं छोड़ता।

जून के अंत और जुलाई की शुरुआत। मैं दूसरा तरीका अपना रहा हूं, और पूरी तरह से, लेकिन फिर से मैं वेबपैक और एंगुलरज के बीच त्रुटियों में दौड़ता हूं। फिर से एक सप्ताह तक शोध किया।

एक बार जब मैं कई दिन बिताता हूं और आंशिक रूप से रातें हल के लिए खोजता हूं, तो मैं होल्जस सम्मेलन से बहुत दिलचस्प भाषण देता हूं, जहां लोग पहले से ही वेबपैक में बहुत गहरी खुदाई कर रहे हैं। मैं उसकी समझ में आगे बढ़ रहा हूं, लेकिन मैं अभी भी अंत तक सामग्री को नहीं समझ पा रहा हूं।

रुचि मजबूत होती है।

एक सहकर्मी कहता है - इसे भूल जाओ, कुछ महीनों में इस परियोजना को सौंपने के लिए, अब ऐसा करने की आवश्यकता नहीं है।
मैं हथौड़ा नहीं करता, लेकिन मैंने इसे बंद कर दिया - बहुत काम, यह मुझे सब कुछ निचोड़ देता है, अतिरिक्त गतिविधियों के लिए कोई समय नहीं बचा है।

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

मुख्य शरीर

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

कार्य: प्रोजेक्ट में फ़ाइलों को अपडेट करते समय वर्तमान पृष्ठ को पुनः लोड करें।
विशेषताएं: सभी पुस्तकालय index.html में जुड़े हुए हैं, आपको आयात का उल्लेख करने की आवश्यकता नहीं है। पुनः लोड करने से पहले की विधानसभा की अभी तक आवश्यकता नहीं है, केवल पुनः लोड करें। एक विकास सर्वर में जो हमारे समर्थन के लिए अनुरोध करता है, मैं पैकेज का उपयोग कर सकता हूं, और मुझे इसकी आवश्यकता भी हो सकती है!

यह सब शुक्रवार को होता है और मैं तय करता हूं कि हमारी परियोजना के लिए एक सरलीकृत संस्करण में, मैं एक ऐसी तकनीक को लागू करने में काफी सक्षम हूं जो मुझे और मेरे सहयोगियों को F5 से बचाएगी।

विचार प्रक्रिया आगे बढ़ती है और समाधान की एक दृष्टि सिर में बनती है।
सबसे सरल सर्वर (जैसे हमारा), इसमें मैं पूरे फ़ोल्डर और सबफ़ोल्डर्स के आसपास जाऊंगा और प्रत्येक फ़ाइल के संशोधन तिथियों के साथ एक पेड़ बनाऊंगा।

फिर, प्रत्येक n मिलीसेकंड के बाद, मैं बार-बार बाईपास करूंगा और परिवर्तन समय के मूल्यों की तुलना करूंगा। परिवर्तित - पुनः लोड। एक दोस्त आपको बताता है - "पहिया को मजबूत न करें, नोड में एक घड़ी है। जेएस"। महान, मैं इसका इस्तेमाल करूंगा। Server.js में, मैं प्रोजेक्ट फ़ोल्डर के पीछे घड़ी को कॉन्फ़िगर करूँगा और कुछ अंदर बदलने के लिए मैं location.reload () को कॉल करूंगा।

पहला पुनरावृत्ति:

server.js

var express = require('express'); var app = express(); var server = require('http').Server(app); const port = 9080; server.listen(port); app.use(express.static(__dirname + '/src')); location.reload().

पहली समस्या स्थान है- यह एक नोड.जेएस वैरिएबल नहीं है (इस समय मैं इस बात की समझ हासिल करता हूं कि प्रक्रिया को आगे बढ़ाने के मेरे प्रयास क्यों थे। सामने वाले भी असफल थे))।

दूसरी समस्या यह है कि सामने वाले को यह समझना चाहिए कि फिर से क्या करना है।

बाहर निकलें - वेबसैट! विचार आकर्षक है + मैंने उनके साथ "आधा-शंकु" काम किया जब मैंने एक चैट लिखा, तो मेरे पास एक सामान्य विचार है। उसी समय, मैं प्रति सत्र एक रिबूट काउंटर करता हूं, एक चर जोड़ता हूं और जो अनुरोध देता है उसे संसाधित करता है।

मैं कोशिश करता हूं:

server.js

 var express = require('express'); //  express var app = express(); var server = require('http').Server(app); //  http  app var io = require('socket.io')(server); //  socket.io     var fs = require('fs'); const port = 9080; server.listen(port); app.use(express.static(__dirname + '/src')); let count = 0; app.get('/data', (req, res) => { res.data = count; res.send(`${count}`); }) const dir = './src'; fs.watch(dir, () => { io.emit('change', {data: count}); count += 1; })

मोर्चे पर मैं angularjs पर सबसे सरल ऐप कर रहा हूं

app.js

 angular.module('App', []) .controller('myAppCtrl',['$scope', '$timeout','$http', ($scope, $timeout, $http) => { $scope.title = '       '; $scope.count = 0; $scope.todo = [ '  ,  ', '   node.js watch   ', '     ,         ', ' , codeclimate  travis   ' ] $scope.marks = [ 'watcher      ' ] // var socket = io(); // socket.on('change', (data) => { // console.log(data.data); // $scope.count = data.data; // console.log('scope.count: ', $scope.count); // $scope.$digest();// // location.reload();//agfr // }) $http({method: 'GET',url: 'data'}) .then(response => { $scope.count = response.data;// }); }])

और एक अलग मॉड्यूल जो इसे पुनः लोड करता है। अलग, ताकि परियोजना बहुत अधिक न हो।

watch.js

 var socket = io(); socket.on('change', () => { location.reload(); })

यह काम करता है! वह js के अलावा अन्य फ़ाइलों की निगरानी भी करता है (आप कभी नहीं जानते!): चेक किया हुआ .json, .css
मैं सबफ़ोल्डर्स की जांच करता हूं - यह काम नहीं करता है।

मुझे लगता है, ठीक है, अब मैं इसे पुनरावर्ती रूप से काट दूंगा। बस के मामले में, गूगल और - वॉइला - तैयार है
निर्णय।

इस पैकेज को जोड़ें।

server.js

 var express = require('express'); //  express var app = express(); var server = require('http').Server(app); //  http  app var io = require('socket.io')(server); //  socket.io     var fs = require('fs'); var watch = require('node-watch'); const port = 9080; server.listen(port); app.use(express.static(__dirname + '/src')); let count = 0; let changed = []; app.get('/data', (req, res) => { res.data = count; res.send({count, changed}); }) const translate = { remove: "", update: "" } watch('./', { recursive: true }, function(evt, name) { io.emit('change', {data: count}); count += 1; changed = [{name, evt}, ...changed]; });

हुर्रे, यह काम करता है!

मुझे याद है एस्किल्ट, कोडेकलिफ्ट और ट्रैविस।
पहले को स्थापित करें, बाकी को जोड़ें।
मैं कोड को साफ करता हूं, सब कुछ कांस्टेबल वगैरह है।

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

वह सोमवार को काम करने के लिए आया था और पूरे खेत को काम करने के लिए तैयार किया था। मुझे थोड़ा बदलना पड़ा, एक ही समय में परिवर्तन करना ताकि कमांड लाइन और अपवादों से कुछ स्टार्टअप मापदंडों को बदलना संभव हो, ताकि मैंने सब कुछ नहीं पढ़ा।

नतीजतन, यह इस तरह निकला:

server.js

 const express = require('express'), http = require('http'), watch = require('node-watch'), proxy = require('http-proxy-middleware'), app = express(), server = http.createServer(app), io = require('socket.io').listen(server), exeptions = ['git', 'js_babeled', 'node_modules', 'build', 'hotreload'], // ,   ,    backPortObj = { /*  ,   back*/ }, address = process.argv[2] || /*    back*/, localHostPort = process.argv[3] || 9080, backMachinePort = backPortObj[address] || /*   back */, isHotReload = process.argv[4] || "y", // "n" || "y" target = `http://192.168.${address}:${backMachinePort}`, str = `Connected to machine: ${target}, hot reload: ${isHotReload === 'y' ? 'enabled' : 'disabled'}.`, link = `http://localhost:${localHostPort}/`; server.listen(localHostPort); app .use('/bg-portal', proxy({ target, changeOrigin: true, ws: true })) .use(express.static('.')); if (isHotReload === 'y') { watch('./', { recursive: true }, (evt, name) => { let include = false; exeptions.forEach(item => { if (`${name}`.includes(item)) include = true; }) if (!include) { console.log(name); io.emit('change', { evt, name, exeptions }); }; }); }; console.log(str); console.log(link);

app.js

 var socket = io.connect(); socket.on('change', ({ evt, name, exeptions }) => { location.reload(); });

चल रहे स्क्रिप्ट में package.json में केवल नोड के तहत server.js को कॉल करता है और यह इस तरह से शुरू होता है:

 npm start 1.100 8080

मैंने लिखा। बनाए रखा। F5

अंत में, मैं वान्या को धन्यवाद देना चाहता हूं, मेरे दोस्त, कुछ जगहों पर मास्टरमाइंड और मुख्य किकर, साथ ही साशा - वह आदमी जिसे मैं अपना गुरु मानता हूं!

एक आफ्टरवर्ड के बजाय

और 2 सप्ताह के बाद, मेरी परीक्षण अवधि के अंतिम दिन, मैंने अपने प्रोजेक्ट पर वेबपैक और वेबपैक-देव-सर्वर को खराब कर दिया, अपने गर्म रीलोडर को इतिहास शेल्फ पर धूल में भेज दिया।

हालाँकि, इन 2 हफ्तों का हमने हर दिन इस्तेमाल किया और उन्होंने नियमित रूप से अपना काम किया!

कैसे ग्रीन जूनियर ने अपना हॉट-रीलोडर लिखा

प्रागितिहास

प्रस्तावना

शुरुआत

टाई

मुख्य शरीर

एक आफ्टरवर्ड के बजाय

More articles: