包裹不会重新加载对 HTML 页面的更改

Question

我正在尝试起床运行 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

Shell

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.

Answer 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 事件在文件系统中触发。 Parcel 看到了这个，就做到了。

Answer 2

parcel watch 允许您 热重载 javascript 和 html 但它会不创建运行ning 开发服务器，因此您需要将两个 npm 命令组合到运行 parcel 开发服务器以及热重载。

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

package.json 以下脚本设置为例

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

在您的终端中运行：npm run dev

Answer 3

将脚本标签从 head 移动到 body 标签并添加 type="module" 属性。

像这样：

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

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

        <script type="module" src="./app.js"></script>
    </body>
</html>

这应该可以解决您的问题。

包裹不会重新加载对 HTML 页面的更改

Parcel does not reload changes to HTML page

javascript

vim

parceljs