قبل التاريخ
سطرين عني لفهم عام لمستوى المؤلف والمشكلة التي يجري حلها.اسمي يوجين وأنا مطور ويب مطور برامج الواجهة الأمامية الخضراء.
منذ عام آخر ، عملت في مجال مختلف تمامًا وفكرت نظريًا في تغيير مهنتي ، لكن في ديسمبر 2018 ، وجدت طريقي وبدأت في التمثيل.
بعد حوالي ستة أشهر من التدريب الكلي ، أحصل على وظيفة كمبرمج أمامي. لقد تعلمت أشياء أساسية (أريد أن أعتقد ذلك) ، js ، تفاعل مع DOM ، تفاعل + رد. HTML و CSS على الأقل + فهم عام لل bootstrap والتجمع ، والعمل مع بوابة سطر الأوامر.
بالإضافة إلى النظرية ، تم إنشاء عدد من المشاريع التدريبية ، بما في ذلك الدردشة على رد فعل + رد ، بالإضافة إلى عدة محاولات لتنفيذ بعض أفكارهم.
بشكل عام ، مثل هذا الرجل الحديث المعياري للمجموعة الأمامية.
في الأسبوع الأول والنصف الأول قمت بإعداد جهاز افتراضي ، هناك الكثير من كل شيء وكل شيء غير مألوف وغير مفهوم بالنسبة لي.
في هذه العملية ، تعرفت على الأدوات والتقنيات الجديدة: مع قواعد البيانات (وأضع نفسي إشارة مرجعية أخرى في قائمة "تعلم") ، المعجون ، wincsp ، إلخ.
اجتياز هذه الدورة التدريبية بنجاح والانتقال إلى المقدمة.
مقدمة
بعد أن كتبت بالفعل أداة إعادة التحميل وهذه المقالة ، وجدت نظائرها ، بما في ذلك نظائرها على
حبري . ومع ذلك ، قرر نشر دراجته.
بداية
لدينا مشروع كبير إلى حد ما ، موروث ، مكتوب في angularJS ، بكل سحره. بعد React ، بدا لي وكأنه ديناصور ، لكن لا شيء ، أنا أشتري دورات angularjs ، وسرعان ما بدأت وأبدأ في الاستفادة.
الانطباع الإيجابي هو أن المشروع كتب بشكل جيد ، من قبل أشخاص يحملون أذرع مستقيمة بوضوح. متغيرات مع تسمية واضحة واضحة ، والهيكل هو نفسه في كل مكان وبشكل عام المنطق كله يمكن الوصول إليها للغاية ومعبرة ببساطة.
ولكن هناك ما يكفي من السلبيات.
المشكلة الأولى: يتم بناء المشروع من قبل بعض المصغر القديم ، ومن المستحيل استخدام بناء جملة js الحديثة. None () => {} ، const res = [... data ، subRes] ، غير متزامن / انتظار ...
المشكلة الثانية: لا توجد حزمة ويب ، ولا حتى بلع على الأقل ، وبالتالي لا يوجد خادم webpack-dev مألوف بالنسبة لي مع إعادة تحميلها الساخنة الممتازة.
كتبت. الاحتفاظ بها. F5. غير مريحة. الألم؟ لا ألم مباشر ، ولكن غير مريح للغاية.
المشكلة الثالثة: إنشاء ملف .bat للمشروع ، حيث يتم نسخ جزء من المشروع ببساطة ، ويتم جمع جزء من المكتبات دون أدنى حد ، ويتم تصغير جزء في ملف واحد ، والباقي من ملفات المشروع إلى آخر. قائمة المكتبات في الملف الثالث. قائمة الملفات لبناء في الرابع. و هكذا.
المشكلة الرابعة: جميع المكتبات في مجلد libs ومتصلة بواسطة برنامج نصي في index.html. الكل ، باستثناء التعبير عن الوكيل والوكيل المخصص له (لا يشاركان في التجميع ، ولكن فقط للتطوير).
وبعيدًا عن كل مكان هناك إصدارات أو إشارة إلى مكتبة محددة.
عشت في تدريب في عالم جميل من البرمجة الوظيفية ، مليئة بـ es6 + ، webpack-dev-server ، tdd ، eslint ، الإنشاء التلقائي وما إلى ذلك.
وهنا في عالم الكبار ، كل شيء مختلف تمامًا ...
التعادل
لكني أحب العمل ، فأنا أعتبر العقبات بمثابة فرص للتطوير الذاتي ، والشركة جيدة ، والجو ممتاز ، وعيني مشتعلة!
في ساعات العمل ، أقوم بمهام العمل ، وفي وقت فراغي أحاول تحسين شيء ما.
في منتصف يونيو ، أبدأ بمحاولة ربط حزمة الويب ، لكن النهج الأول يتوقع حدوث فشل كامل. لقد تعذبت لمدة أسبوع ، لقد تعبت من ذلك ، تم تأجيله مؤقتًا.
قررت أن أبدأ صغيرة - أقوم بتوصيل بناء الجملة الجديد من خلال بابل. أقوم بإضافة المعالجة الأولية لبابل إلى تصميمنا السحري. لكن ، هناك شيء ما يفسد التعطش وتعثر مصغرنا القديم. أنا أبحث عن مشكلة.
يتعثر في إحدى المكتبات من libs daddy الأنيق. أنظر إلى ملفات المكتبة: لقد تم تصغيرها بالفعل في بناء الجملة القديم.
أنا أقول بابل - "أنت لا تذهب هنا ... الرأس سيحصل على الكود ، سيكون سيئًا للغاية." أتحقق: كل شيء يعمل! الصيحة! الآن لدي إمكانية الوصول إلى كل تلك الأشياء الشبابية العصرية الأنيقة والجديدة! النصر الأول. لطيفة. أعتقد في هذه المناسبة لإعادة تسمية البرنامج النصي في e.bat (e-Evgen) ، ولكن لا يمكن أن تقرر.
بناء الجملة الجديد مألوف وممتع للغاية ، لكن فكرة إنشاء ملفوف لا تتركني.
نهاية يونيو وبداية يوليو. أقوم بتنفيذ الطريقة الثانية ، أكثر شمولاً ، لكن مرة أخرى واجهت أخطاء بين webpack و angularjs. مرة أخرى أسبوع من البحث.
بمجرد أن أمضي عدة أيام وليال جزئية في البحث عن حل ، صادفت خطابات مهمة للغاية من مؤتمر HolyJS ، حيث يقوم الرجال بالفعل بالحفر بعمق في حزمة الويب. أنا أتقدم في فهمه ، لكنني ما زلت لا أفهم المواد حتى النهاية.
قوة الاهتمام.
يقول أحد الزملاء - ننسى ذلك ، لتسليم المشروع في غضون شهرين ، لم تعد هناك حاجة للقيام بذلك.
أنا لست مطرقة ، لكني أجلتها - كثير من العمل ، يضغطني على كل شيء ، ولا يتبقى وقت لأنشطة خارج المنهج.
منتصف تموز (يوليو) ، حصلت في يدي على غرار مشروعنا ببناء مخصص. أنا أذهب معه إلى النهج الثالث وأقوم فعليًا بإعداد حزمة الويب معنا ، لكن في النهاية ألاحظ أخطاء جديدة ليس لدي وقت كافٍ لحلها ، فعمل العمل بكثافة جديدة + يدمرني عقلياً ، وأرجئ هذا العمل مرة أخرى.
الجسم الرئيسي
منتصف أغسطس. نتيجة لذلك ، يتحدث أحد الأصدقاء عن تعلم node.js ورغبته في كتابة أداة إعادة التحميل الخاصة به. أفكار حول تجميعنا تندلع بقوة متجددة.
المهمة: إعادة تحميل الصفحة الحالية عند تحديث الملفات في المشروع.
الميزات: ترتبط جميع المكتبات في index.html ، لا يمكنك طلب ذلك ، ناهيك عن الاستيراد. ليست هناك حاجة إلى التجميع قبل إعادة التحميل حتى الآن ، إعادة تحميل فقط. في خادم تطوير يعمل على إرسال طلبات الدعم الخاصة بنا ، يمكنني استخدام الحزم ، ويمكنني أيضًا أن أطلبها!
كل هذا يحدث يوم الجمعة وقررت أنه في إصدار مبسط لمشروعنا ، أنا قادر تمامًا على تطبيق تقنية من شأنها أن تنقذني وزملائي من F5.
تستمر عملية التفكير وتشكلت رؤية للحل في الرأس.
أبسط خادم (مثل الخادم الخاص بنا) ، سوف أتجول فيه حول المجلد والمجلدات الفرعية بالكامل ، وأشكل شجرة مع تواريخ التعديل لكل ملف.
بعد ذلك ، بعد كل ميلي ثانية من الثانية ، سأتجاوز مرارًا وتكرارًا وأقارن بين قيم وقت التغيير. تم التغيير - إعادة التحميل. يخبرك أحد الأصدقاء - "لا تقم بإعادة اختراع العجلة ، فهناك ساعة في العقدة". عظيم ، سأستخدمها. في server.js ، سوف أقوم بتهيئة المشاهدة خلف مجلد المشروع وسأتصل بالموقع. reload () لتغيير شيء من الداخل.
التكرار الأول:
server.jsvar 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().
المشكلة الأولى هي الموقع ، وهذا ليس متغير node.js (في هذه اللحظة أفهم لماذا لم تنجح محاولاتي للوصول إلى process.env في المقدمة))).
المشكلة الثانية هي كيفية جعل الجبهة تفهم ما يحتاج إلى إعادة التحميل.
الخروج - websocket! الفكرة مغرية + لقد عملت معهم "نصف المخاريط" عندما كتبت محادثة ، ولدي فكرة عامة. في الوقت نفسه ، أقوم بمهمة إعادة التشغيل لكل جلسة ، وأضف متغيرًا وقم بمعالجة الطلب الذي يقدمه.
أنا أحاول:
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 (لا تعرف أبدًا!): Checked .json، .css.
أنا التحقق من المجلدات الفرعية - أنها لا تعمل.
أعتقد ، حسناً ، الآن سأقطعها بشكل متكرر. فقط في حالة ، google و - voila - جاهزان
القرار.إضافة هذه الحزمة.
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]; });
الصيحة ، إنها تعمل!
أتذكر eslint ، codeclimate و travis.
تثبيت الأول ، إضافة الباقي.
أقوم بتنظيف الكود ، كل شيء مختلف عن const وما إلى ذلك.
يقسم Linter بأن الزاوي غير معرف ، لكن ميزات ربط المكتبات في المشروع تملي هذا السلوك ، وأطفئه. في الوقت نفسه ، أنا المسمار المتغيرات من سطر الأوامر قليلا ، تشغيله ، كل شيء يعمل!
لقد جاء للعمل يوم الاثنين وربط المزرعة بأكملها بمسودة عمل. اضطررت إلى تغيير قليلاً ، وفي الوقت نفسه إجراء تغييرات بحيث كان من الممكن تغيير بعض معلمات بدء التشغيل من سطر الأوامر والاستثناءات ، حتى أنني لم أقرأ كل شيء.
نتيجة لذلك ، اتضح مثل هذا:
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في الختام ، أود أن أشكر فانيا ، صديقي ، في بعض الأماكن ، العقل المدبر والرئيس الرئيسي ، وكذلك ساشا - الرجل الذي أعتبره المرشد الخاص بي!
بدلا من الكلمة الأخيرة
وبعد أسبوعين ، في اليوم الأخير من الفترة التجريبية ، ما زلت أضغط على webpack و webpack-dev-server في مشروعنا ، وأرسل جهاز إعادة التحميل الساخن إلى الغبار على رف المحفوظات.
ومع ذلك ، استخدمناها كل أسبوعين كل يوم وكان يؤدي وظيفته بانتظام!