Latar belakang
Beberapa baris tentang saya untuk pemahaman umum tentang tingkat penulis dan masalah yang diselesaikan.Nama saya Eugene dan saya adalah pengembang web frontend green junior developer.
Beberapa tahun yang lalu, saya bekerja di bidang yang sama sekali berbeda dan hanya dalam teori berpikir tentang mengubah profesi saya, tetapi sekitar Desember 2018 saya menemukan jalan saya dan mulai bertindak.
Setelah sekitar enam bulan pelatihan total, saya mendapatkan pekerjaan sebagai programmer frontend. Saya telah belajar hal-hal mendasar (saya ingin berpikir begitu), js, interaksi dengan DOM, bereaksi + redux. HTML dan CSS setidaknya + pemahaman umum tentang bootstrap dan assembly, bekerja dengan git, baris perintah.
Selain teori, beberapa proyek pelatihan telah dibuat, termasuk obrolan tentang reaksi + reduks, serta beberapa upaya untuk mengimplementasikan beberapa ide mereka.
Secara umum, standar pria modern ditetapkan untuk front'a pemula.
Satu setengah minggu pertama saya membuat mesin virtual, ada banyak segalanya dan semuanya tidak saya kenal dan tidak bisa dipahami.
Dalam prosesnya, saya berkenalan dengan alat-alat dan teknologi baru: dengan basis data (dan menempatkan sendiri bookmark lain dalam daftar "belajar"), dempul, wincsp, dll.
Berhasil melewati rintangan ini dan pergi ke depan.
Kata Pengantar
Setelah menulis isi ulang saya dan artikel ini, saya menemukan analog, termasuk yang ada di
Habré . Namun, ia memutuskan untuk menerbitkan sepedanya.
Mulai
Kami memiliki proyek yang agak besar, diwariskan, ditulis dalam angularJS, dengan semua daya tariknya. Setelah Bereaksi, dia tampak seperti dinosaurus bagi saya, tetapi tidak ada, saya membeli kursus sudut, dengan cepat masuk dan mulai mendapat manfaat.
Kesan positif adalah bahwa proyek itu ditulis dengan baik, oleh orang-orang dengan lengan lurus yang jelas. Variabel dengan penamaan yang jelas, strukturnya sama di mana-mana dan secara umum seluruh logikanya sangat mudah diakses dan diungkapkan.
Tapi ada cukup banyak kekurangan.
Masalah pertama: proyek sedang dibangun oleh beberapa minimizer kuno, dan tidak mungkin menggunakan sintaks js modern. Tidak ada () => {}, const res = [... data, subRes], async / tunggu ...
Masalah kedua: tidak ada webpack, atau bahkan setidaknya tegukan, dan karenanya juga tidak ada webpack-dev-server yang akrab bagi saya dengan isi ulang yang sangat baik.
Menulis Disimpan F5. Nyaman Sakit? Bukan rasa sakit langsung, tetapi sangat tidak nyaman.
Masalah ketiga: membangun file .bat proyek, di mana bagian dari proyek hanya disalin, bagian dari perpustakaan dikumpulkan tanpa minimalisasi, sebagian diminimalkan ke dalam satu file, sisa file proyek ke yang lain. Daftar perpustakaan di file ketiga. Daftar file untuk membangun di keempat. Dan sebagainya.
Masalah keempat: semua perpustakaan rapi di folder libs dan terhubung oleh skrip di index.html. Semua-semua, kecuali untuk mengekspresikan dan proksi untuk itu (mereka tidak terlibat dalam majelis, tetapi hanya untuk pengembangan).
Dan jauh dari mana-mana ada versi atau indikasi perpustakaan tertentu.
Saya tinggal dalam pelatihan di dunia pemrograman fungsional yang indah, penuh es6 +, webpack-dev-server, tdd, eslint, build otomatis, dan sebagainya.
Dan di sini di dunia dewasa, semuanya benar-benar berbeda ...
Dasi
Tapi saya suka bekerja, saya menganggap hambatan sebagai peluang untuk pengembangan diri, perusahaan itu bagus, suasananya luar biasa, mata saya terbakar!
Dalam jam kerja saya melakukan tugas kerja, di waktu luang saya mencoba meningkatkan sesuatu.
Pertengahan Juni, saya mulai dengan upaya untuk mempercepat webpack, tetapi pendekatan pertama mengharapkan kegagalan total. Saya telah disiksa selama seminggu, saya sangat lelah, untuk sementara ditunda.
Saya memutuskan untuk memulai dari yang kecil - saya menghubungkan sintaks baru melalui babel. Saya menambahkan pemrosesan awal dengan babel ke build.bat magis kami, tetapi ada sesuatu yang merusak idyll dan minificator lama kami tersandung. Saya mencari masalah.
Tersandung pada salah satu perpustakaan dari lib ayah yang rapi. Saya melihat file perpustakaan: mereka sudah diperkecil dalam sintaks lama.
Saya katakan babel - "Anda tidak pergi ke sini ... kepala akan mendapatkan kode, itu akan sangat buruk." Saya periksa: semuanya berfungsi! Hore! Sekarang saya memiliki akses ke semua hal-hal muda trendi gaya baru yang bagus! Kemenangan pertama. Bagus Saya pikir pada kesempatan ini untuk mengganti nama script di e.bat (e-Evgen), tetapi tidak bisa memutuskan.
Sintaks baru sangat akrab dan menyenangkan, tetapi pikiran tentang bangunan yang bengkok tidak meninggalkan saya.
Akhir Juni dan awal Juli. Saya melakukan pendekatan kedua, lebih menyeluruh, tetapi sekali lagi saya mengalami kesalahan antara webpack dan angularjs. Lagi-lagi penelitian seminggu.
Setelah saya menghabiskan beberapa hari dan sebagian malam mencari solusi, saya menemukan pidato yang sangat menarik dari konferensi HolyJS, di mana orang-orang sudah menggali cukup dalam ke webpack. Saya maju dalam pemahamannya, tapi saya masih tidak mengerti materi sampai akhir.
Minat menguat.
Seorang rekan berkata - lupakan saja, untuk menyerahkan proyek dalam beberapa bulan, tidak perlu lagi melakukan ini.
Saya tidak palu, tapi saya menundanya - banyak pekerjaan, itu meremas saya segalanya, tidak ada waktu tersisa untuk kegiatan ekstrakurikuler.
Pertengahan Juli, saya mendapatkan di tangan saya mirip dengan proyek kami dengan membangun disesuaikan. Saya akan pergi dengannya untuk pendekatan ketiga dan saya praktis membuat webpack dengan kami, tetapi pada akhirnya saya menangkap kesalahan baru yang saya tidak punya cukup waktu untuk menyelesaikannya, pekerjaan berputar dengan intensitas baru + secara mental menghancurkan saya, saya menunda bisnis ini lagi.
Tubuh utama
Pertengahan agustus. Akibatnya, seorang teman berbicara tentang belajar node.js dan keinginannya untuk menulis hot-reloader sendiri. Pikiran tentang majelis kami menyala dengan semangat baru.
Tugas: memuat ulang halaman saat ini ketika memperbarui file di proyek.
Fitur: semua perpustakaan terhubung di index.html, Anda tidak dapat meminta, belum lagi impor. Perakitan sebelum memuat ulang belum diperlukan, hanya memuat ulang. Di server pengembangan yang proksi permintaan untuk dukungan kami, saya bisa menggunakan paket, dan saya juga bisa meminta!
Semua ini terjadi pada hari Jumat dan saya memutuskan bahwa dalam versi yang disederhanakan untuk proyek kami, saya cukup mampu menerapkan teknologi yang akan menyelamatkan saya dan rekan-rekan saya dari F5.
Proses pemikiran berlangsung dan visi solusi terbentuk di kepala.
Server paling sederhana (seperti milik kami), di dalamnya saya akan berkeliling seluruh folder dan subfolder dan membentuk pohon dengan tanggal modifikasi dari setiap file.
Kemudian, setelah setiap n milidetik, saya akan memintas lagi dan lagi dan membandingkan nilai waktu perubahan. Diubah - memuat ulang. Seorang teman memberi tahu Anda - “jangan menemukan kembali roda, ada sebuah arloji di node.js”. Bagus, saya akan menggunakannya. Di server.js, saya akan mengonfigurasi arloji di belakang folder proyek dan saya akan memanggil location.reload () untuk mengubah sesuatu di dalamnya.
Iterasi pertama:
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().
Masalah pertama adalah lokasi - ini bukan variabel node.js (saat ini saya mendapatkan pemahaman tentang mengapa upaya saya untuk mengakses process.env di depan juga tidak berhasil))).
Masalah kedua adalah bagaimana membuat bagian depan mengerti apa yang perlu dilakukan ulang.
Keluar - websocket! Idenya menggoda + saya bekerja dengan mereka "setengah kerucut" ketika saya menulis obrolan, saya punya ide umum. Pada saat yang sama, saya melakukan penghitung reboot per sesi, menambahkan variabel dan memproses permintaan yang memberikannya.
Saya mencoba:
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; })
Di depan saya sedang melakukan aplikasi paling sederhana di 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;// }); }])
Dan modul terpisah yang memuatnya kembali. Terpisah, agar proyek tidak mendapat terlalu banyak.
watch.js var socket = io(); socket.on('change', () => { location.reload(); })
Itu berhasil! Ia juga memonitor file selain js (Anda tidak pernah tahu!): Memeriksa .json, .css.
Saya memeriksa subfolder - tidak berfungsi.
Saya pikir, oke, sekarang saya akan memotongnya secara rekursif. Untuk jaga-jaga, google dan - voila - siap
keputusan.Tambahkan paket ini.
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]; });
Hore, itu berhasil!
Saya ingat eslint, codeclimate dan travis.
Instal yang pertama, tambahkan sisanya.
Saya membersihkan kode, semuanya var pada const dan seterusnya.
Linter bersumpah bahwa sudut tidak didefinisikan, tetapi fitur saya menghubungkan perpustakaan dalam proyek menentukan perilaku ini, saya mematikannya. Pada saat yang sama, saya sedikit mengacaukan variabel dari baris perintah, menjalankannya, semuanya berfungsi!
Dia datang untuk bekerja pada hari Senin dan mengikat seluruh pertanian ke draft kerja. Saya harus mengubah sedikit, pada saat yang sama membuat perubahan sehingga dimungkinkan untuk mengubah beberapa parameter startup dari baris perintah dan pengecualian, sehingga saya tidak membaca semuanya.
Hasilnya, ternyata seperti ini:
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(); });
skrip yang berjalan di package.json hanya memanggil server.js dari bawah node dan dimulai seperti ini:
npm start 1.100 8080
Menulis Disimpan
F5Sebagai penutup, saya ingin mengucapkan terima kasih kepada Vanya, teman saya, di beberapa tempat dalang dan penendang utama, serta Sasha - pria yang saya anggap sebagai mentor saya!
Alih-alih kata penutup
Dan setelah 2 minggu, pada hari terakhir masa percobaan saya, saya mengacaukan webpack dan webpack-dev-server ke proyek kami, mengirimkan reloader panas saya ke debu di rak sejarah.
Namun, 2 minggu ini kami menggunakannya setiap hari dan dia secara teratur melakukan tugasnya!