Parcel 不会重新加载对 HTML 页面的更改答案

【问题标题】：Parcel does not reload changes to HTML pageParcel 不会重新加载对 HTML 页面的更改
【发布时间】：2020-04-01 05:38:22
【问题描述】：

我正在尝试使用Parcel 启动并运行，但我无法进行基本设置。我想提供一个静态 HTML 页面，该页面在更改时会自动重新加载。

当我转到 http://localhost:1234 时，Parcel 会为我的页面提供服务。如果我更改 index.html 中的任何内容，它不会重新加载...或者它会以空响应重新加载。

版本

parcel: 1.12.4
npm: 6.12.1
node: v13.3.0

index.html

<!doctype html>
<html>
    <head>
        <title>Tinsel town</title>

        <script src="app.js"></script>
    </head>

    <body>
        <h1>Tinsel…</h1>
    </body>
</html>

app.js

// empty

壳牌

matt$ parcel index.html --log-level 5
[13:20:42]: Server running at http://localhost:1234 
[13:20:42]: Building...
[13:20:42]: Building index.html...
[13:20:43]: Building app.js...
[13:20:43]: Built app.js...
[13:20:43]: Built index.html...
[13:20:43]: Producing bundles...
[13:20:43]: Packaging...
[13:20:43]: Building hmr-runtime.js...
[13:20:43]: Built ../../../usr/lib/node_modules/parcel-bundler/src/builtins/hmr-runtime.js...
[13:20:43]: ✨  Built in 477ms.
[13:20:49]: Building...
[13:20:49]: Producing bundles...
[13:20:49]: Packaging...
[13:20:49]: ✨  Built in 2ms.

【问题讨论】：

标签： javascript vim parceljs

【解决方案1】：

Vim 以及它如何保存文件是问题所在。

当你保存在 Vim 中时，它会重命名你正在编辑的文件并将当前缓冲区保存到文件位置：

           +------------+       +---------------------------------+
           | index.html +------>+ ~/.cache/vim/backup/index.html~ |
           +------------+       +---------------------------------+


                            index.html is now kaput!

              (no `MODIFY` filesystem event fired, only `DELETE`)


                        +----------+       +------------+
                        | *buffer* +------>+ index.html |
                        +----------+       +------------+

                        (`CREATE` filesystem event fired)

可以通过在.vimrc 中将backupcopy 设置为yes 来更改此默认行为：

set backupcopy=yes " Necessary for ParcelJS to work

这会导致 Vim 直接写入您正在编辑的文件，这反过来会导致在文件系统中触发modification 事件。包裹看到这个，做它的事情。

【讨论】：

【解决方案2】：

parcel watch 允许您热重载 javascript 和 html 但它不会创建正在运行的开发服务器，因此您需要结合两个 npm与热重载一起运行包裹开发服务器的命令。

你可以创建一个结合两个 npm 命令的脚本，而不是运行 2 个单独的终端选项卡

下面以 package.json 脚本设置为例

   "scripts": {
    "dev": "(parcel ./src/index.html) & parcel watch ./src/index.html",
    "build": "parcel build ./src/index.html"
  },

在终端运行：npm run dev

【讨论】：