背景知识
关于我的几行内容，以大致了解作者的水平和所解决的问题。我叫Eugene，我是一名Web开发人员绿色初级前端开发人员。
几年前，我在一个完全不同的领域工作，只在理论上考虑过改变职业，但是在2018年12月左右，我找到了自己的道路并开始行动。
经过大约六个月的总体培训，我找到了一个前端程序员的工作。 我已经学到了基本的东西（我想是这样），js，与DOM的交互，react + redux。 HTML和CSS至少+对bootstrap和Assembly的一般理解，可以使用git（命令行）进行操作。
除了理论之外，还进行了一些培训项目，包括关于react + redux的聊天，以及尝试实施一些想法的一些尝试。
通常，这种标准的现代绅士风格适合初学者。
在第一周半的时间里，我安装了虚拟机，其中有很多东西对我来说是陌生且难以理解的。
在此过程中，我熟悉了新的工具和技术：数据库（在“学习”列表中加了另一个书签），腻子，wincsp等。
成功通过此障碍物路线并走到最前面。
前言
在已经编写了我的reloader和本文之后，我发现了类似物，包括
Habré上的类似物。 但是，他决定发布自己的自行车。
开始
我们有一个相当大的项目，它继承了用angularJS编写的所有功能。 加入React之后，他对我来说就像是恐龙，但没什么，我买了angularjs课程，赶紧开车并开始受益。
一个积极的印象是，该项目的编写得很好，双臂清晰明了。 变量具有出色的清晰命名，其结构在任何地方都是相同的，并且总体而言，整个逻辑非常易于访问且表达简单。
但是有足够的缺点。
第一个问题：该项目是由一些古老的最小化工具构建的，不可能使用现代js语法。 None（）=> {}，const res = [... data，subRes]，异步/等待...
第二个问题：既没有webpack，也没有至少gulp，因此也没有我熟悉的webpack-dev-server，它具有出色的热重装功能。
写了 已保存。 F5。 不方便。 疼吗 不是直接的疼痛，而是非常不舒服。
第三个问题：构建项目.bat文件，其中简单地复制了项目的一部分，没有最小化地收集了一些库，将一些库最小化到一个文件中，其余的项目文件又复制到了另一个文件中。 第三个文件中的库列表。 要在第四个文件中构建的文件列表。 依此类推。
第四个问题：所有库都整齐地放在libs文件夹中，并通过index.html中的脚本连接。 全部内容，除了express和proxy之外（它们不参与汇编，而仅用于开发）。
而且到处都有版本或特定库的指示。
我生活在一个美丽的函数式编程世界中，那里充满了es6 +，webpack-dev-server，tdd，eslint，自动构建等等。
在成人世界里，一切都完全不同...
领带
但是我喜欢工作，我认为障碍是自我发展的机会，公司很好，气氛很好，我的眼睛着火了！
在工作时间，我执行工作任务，在空闲时间，我尝试改善一些东西。
6月中旬，我首先尝试紧固Webpack，但是第一种方法期望完全失败。 我已经折磨了一个星期，对此感到非常厌倦，暂时推迟了。
我决定从小处着手-通过babel连接新语法。 我将babel的初始处理添加到了我们神奇的build.bat中，但是某些东西打破了田园诗，而我们的老缩小器却跌倒了。 我在寻找问题。
偶然发现了整洁的爸爸库中的一个库。 我看一下库文件：它们已经使用旧语法缩小了。
我说通天塔-“您不要去这里...负责人会得到代码，这真的很糟糕。” 我检查：一切正常！ 万岁！ 现在，我可以访问所有这些漂亮的新时尚新潮青年事物！ 第一场胜利。 好啊 我想在这种情况下可以重命名e.bat（e-Evgen）中的脚本，但无法决定。
新的语法是如此的熟悉和令人愉悦，但是关于歪斜的构建的想法并没有离开我。
6月底和7月初。 我正在做第二种方法，更彻底，但是再次遇到webpack和angularjs之间的错误。 再次进行了一周的研究。
在花了几天半夜寻找解决方案之后，我在HolyJS大会上遇到了非常有趣的演讲，在那儿，人们已经相当深入地研究了webpack。 我对他的理解有所进步，但我仍然不了解有关材料的内容。
兴趣增强。
一位同事说-算了，要在几个月后移交该项目，就不再需要这样做了。
我没有锤子，但是我推迟了它-很多工作，它压缩了我的一切，没有多余的时间进行课外活动。
7月中旬，我将获得类似于定制项目的项目。 我将与他一起使用第三种方法，实际上是与我们一起建立webpack，但是最后我遇到了我没有足够时间解决的新错误，工作以新的强度进行着，使我精神崩溃，我再次推迟了这项业务。
主体
八月中旬。 结果，一个朋友谈论了学习node.js以及他写自己的热重装器的愿望。 关于我们大会的想法焕发出新的活力。
任务：在项目中更新文件时重新加载当前页面。
特点：所有库都连接在index.html中，您不需要，更不用说导入。 不需要重新加载之前的装配，只需重新加载即可。 在可以请求我们支持的开发服务器中，我可以使用软件包，也可以要求！
所有这一切都发生在星期五，因此我决定在我们项目的简化版本中，我完全有能力实施一项可以使我和我的同事摆脱F5的技术。
思考过程继续进行，头脑中形成了解决方案的愿景。
最简单的服务器（例如我们的服务器）将在其中遍历整个文件夹和子文件夹，并与每个文件的修改日期一起形成一棵树。
然后，每隔n毫秒，我将一次又一次绕过，并比较更改时间的值。 已更改-重新加载。 一位朋友告诉您-“不要重新发明轮子，node.js中有一块手表”。 太好了，我会用的。 在server.js中，我将在项目文件夹后面配置watch，然后调用location.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的尝试也失败了））。
第二个问题是如何使前端了解重新加载需要做什么。
退出-网络套接字！ 这个想法很诱人+当我写聊天时，我和他们一起“半锥体”一起工作，我有一个大致的想法。 同时，我为每个会话做一个重启计数器，添加一个变量并处理给出该请求的请求。
我尝试：
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]; });
太好了，它有效！
我记得eslint，codeclimate和travis。
安装第一个，添加其余的。
我清理代码，const上的所有内容都是var等。
Linter发誓没有定义angular，但是我在项目中连接库的功能决定了这种行为，我将其关闭。 同时，我从命令行稍微拧了一些变量，运行它，一切正常！
他星期一来上班，将整个农场固定为工作草案。 我必须进行一些更改，同时进行更改，以便可以从命令行和异常中更改一些启动参数，以便我不会阅读所有内容。
结果，结果是这样的：
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最后，我要感谢我的朋友Vanya，在某些地方要感谢策划者和主要推动者，以及Sasha（我认为我的指导者）！
而不是后记
2周后，在试用期的最后一天，我将webpack和webpack-dev-server拧入了我们的项目，将我的热加载器送入了历史记录架。
但是，这两个星期我们每天都用它，他定期做他的工作！