esbuild中文文档-基础配置项（General options - Live reload)

哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！

老规矩，小手动起来~点赞关注不迷路！

最近开始翻译esbuild，欢迎大家点赞收藏我的专栏：esbuild中文文档专栏，专栏内容完全免费，收藏以备不时之需

实时重载（Live reload）

Supported by: Build

实时重载是一种开发方法，您可以打开浏览器，并在代码编辑器保存的同时看到它。当您编辑并保存源代码时，浏览器会自动重新加载，并且重新加载的应用程序版本包含您的更改。这意味着您可以更快地迭代，因为您不必手动切换到浏览器，刷新，然后在每次更改后切换回代码编辑器。例如，它在更改CSS时非常有用。

所有的esbuild API是不可以直接进行实时重载的。相反，您可以通过组合监听模式（在编辑和保存文件时自动启动构建）和服务模式（为最新构建提供服务，但在完成之前进行阻止），以及仅在开发过程中新增的少量JavaScript代码，来达到实时重载的效果。

第一步就是把监听模式和服务模式打开：

esbuild app.ts --bundle --outdir=www --watch --servedir=www

第二步是向JavaScript中添加一些代码，这些代码监听/ebuild服务器发送的事件源。当您收到change事件时，您可以重新加载页面以获取应用程序的最新版本。您可以在一行代码中完成此操作：

new EventSource('/esbuild').addEventListener('change', () => location.reload())

像这样！如果你在浏览器中加载应用程序，那么当你编辑和保存文件时，页面现在应该会自动重新加载（假设没有构建错误）。

这步只应该出现在开发过程中，而不应出现在生产中。在生产中删除此代码的一种方法是使用if语句（如if（!window.IS_PRODUCTION））阻止它，然后使用define设置window.IS_PRODUCTION在生产中为true。

实时重载注意事项（Live reload caveats）

这样来实现的实时重载有一些已知的注意事项：

• 这些事件仅在esbuild的输出output发生更改时触发。当与正在监听的生成结果无关的文件发生更改时，这些事件就不会触发。如果您的HTML文件引用了esbuild不知道的其他文件，并且这些文件已更改，您可以手动重新加载页面，也可以实现自己的实时重新加载结构，而不是使用esbuild的内置行为。

• EventSource API应该自动为您重新连接。然而，如果服务器暂时无法访问，Firefox中有一个bug会让这个功能失效。解决方法是，使用其他浏览器，或者在发生这种情况时手动重新加载页面，或者在出现连接错误时编写更复杂的代码，手动关闭并重新创建EventSource对象。

• 浏览器供应商已决定在没有TLS的情况下不会实现HTTP/2特性。这意味着，当使用http://协议时，每个/ebuild事件源将占用宝贵的6个同时每个域http/1.1连接中的一个。因此，如果你打开了六个以上使用这种实时重载技术的HTTP选项卡，你将无法在其中一些选项卡中使用实时重载（其他事情也可能会中断）。解决方法是启用https://协议。

CSS的热更新（Hot-reloading for CSS）

change事件还包含用于启用更高级场景的附加信息。它目前包含添加、删除和更新的数组，其中包含自上一次生成以来更改的文件路径，可以通过以下TypeScript接口进行描述：

interface ChangeEvent {
  added: string[]
  removed: string[]
  updated: string[]
}

下面的代码示例为CSS启用了“热更新”，即CSS在不重新加载页面的情况下自动更新到页面上。如果出现与CSS无关的事件，则整个页面将重新加载：

new EventSource('/esbuild').addEventListener('change', e => {
  const { added, removed, updated } = JSON.parse(e.data)

  if (!added.length && !removed.length && updated.length === 1) {
    for (const link of document.getElementsByTagName("link")) {
      const url = new URL(link.href)

      if (url.host === location.host && url.pathname === updated[0]) {
        const next = link.cloneNode()
        next.href = updated[0] + '?' + Math.random().toString(36).slice(2)
        next.onload = () => link.remove()
        link.parentNode.insertBefore(next, link.nextSibling)
        return
      }
    }
  }

  location.reload()
})

JS的热更新（Hot-reloading for JavaScript）

esbuild当前并未实现JavaScript的热更新。可以透明地实现CSS的热更新，是因为CSS是无状态的，但JavaScript是有状态的，所以不能像CSS那样透明地实现JavaScript的热更新。

其他一些开发服务器无论如何都会实现JavaScript的热更新，但它需要额外的API，有时需要框架的特定的hack，有时还会在session中引入状态相关的错误。这样做超出了esbuild的范围。如果JavaScript的更新是您的需求之一，那么欢迎您使用其他工具而不是esbuild。

然而，通过esbuild的实时重新加载，您可以在sessionStorage中保持应用程序的当前JavaScript状态，以便在页面重新加载后更容易地恢复应用程序的JavaScript状态。如果你的应用程序加载很快（为了用户的利益，它应该已经加载了），那么使用JavaScript进行实时重新加载的速度几乎与使用JavaScript进行热加载的速度一样快。

结语

笔者根据esbuild文档搭建了一套简洁的ts开发环境，整合了eslint，附带vscode调试教程：esbuild配合vscode搭建的ts开发环境，编译速度杠杠的！

我的CSDN专栏：esbuild中文文档专栏，正在不断的更新完善中，不要忘了点赞收藏哦！

励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！