2

我最近开始研究 webpack，因为能够编写真正的 CSS 模块、智能捆绑和其他东西的很酷的特性，还有 HMR，这就是我在这里的原因。我见过一些 React Redux 项目的例子，它们可以在不重新加载浏览器的情况下更新 javascript 代码。哇，我认为这是不可能的。

我想知道更多，尤其是它在底层是如何工作的，以使其与我当前的项目 Vanilla JS 一起工作。

与此同时，我对函数式编程语言的兴趣使我接触了 Emacs。我发现在 emacs 编辑器中有一个可以更新 javascript 和 HTML的串模式！实时，无需重新加载浏览器。

我知道他们都使用本地服务器将更改推送到浏览器和客户端上的一些脚本，以某种方式更新代码。但是它们如何保存应用程序的状态。就 React 项目而言，这是可以想象的，由于应用程序基于组件的性质，您可以将组件替换为新组件，但我不确定它们如何搜索变量并为它们重新分配新值。也许他们确实使用了一些 eval 魔法。但我不确定。

  1. 那么它们究竟是如何工作的呢？也许我从错误的角度看，我只是没有清晰的画面。

  2. Emacs 也有 HTML 的实时更新，webpack HMR 能做到吗？
    （我不太关心 HTML，因为我是用 JS 做的。但我认为它可以解释这两者之间的区别。）

  3. 这样做哪个更好？
    每个的优点和缺点是什么，或者它们只是世界的不同部分，可以整合成更好的东西？

  4. 也许有更好的选择，不需要像本地网络服务器这样的中间件，而只是编辑器插件与一些浏览器扩展通信？

PS：我不介意学习可以优化我的工作的工具，因为它总是有回报的。

4

1 回答 1

2

那么它们究竟是如何工作的呢？

从Webpack HMR 文档中，

通常，模块开发人员编写在更新此模块的依赖项时调用的处理程序。他还可以编写一个在更新此模块时调用的处理程序。

每个模块类型都需要为其编写更新逻辑。

从串模式存储库，

表达式从编辑缓冲区即时发送以在浏览器中进行评估，就像 Emacs 在 Lisp 模式下使用劣质 Lisp 进程所做的那样。

您的代码作为字符串发送到浏览器，并通过全局eval.

这样做哪个更好？各有什么优缺点？

如果您使用为它们编写了 HMR 插件的库，则可能值得使用此功能。没有 HMR 钩子的库不会从中受益。Webpack 的 HMR 看起来非常复杂，它的文档和插件警告 HMR 的“实验”状态。因此，它可能不可靠，因此可能会对您的开发产生反作用。例如，重新加载的模块需要正确清理非重新加载的模块。如果某些脚本将侦听器添加到window或document不提供删除它们的方法怎么办？

如果您希望您的文本编辑器充当浏览器的附加 REPL，那么您可以使用skewer-mode. 要对应用程序进行任何更改，必须通过全局变量公开其中的某些部分。也许您导出一个全局对象并附有一堆子模块，例如window.APP = {}, APP.Dialog, APP.Form... 或者，也许您只是将数百个隐式全局变量和函数释放到您的环境中。您可以通过评估这些模块/函数/变量的定义，然后评估一些使用它们的代码来查看应用程序中的变化，例如通过调用APP.initialize()引导您的应用程序的函数，或通过触发您使用的视图库中的重绘（通常通过执行用户操作（例如单击元素）。

如果您的应用程序没有编写成可以在浏览器控制台中修改（例如，如果您使用像 Browserify 或 Webpack 这样的模块编译器，它将您的代码包装在一个大闭包中），那么您将无法做很多事情skewer-mode. 此外，请考虑手动评估代码片段/文件并重新运行初始化代码（并可能创建您将浪费时间调试的不可能的应用程序状态），或者只是刷新页面并重新创建以前的状态是否会更快。

您从这些工具中获得的好处在很大程度上取决于您的应用程序的结构方式。我可以看到他们在完全正确的条件下（我在上面描述的）创建了令人愉快的开发工作流程。否则，它们似乎太可能造成不值得的伤害。

于 2016-05-06T01:25:17.867 回答