包裹不重新加载更改到 HTML 页面
[英]Parcel does not reload changes to HTML page
问题描述
I'm trying to get up and running with Parcel but I can't get a basic setup to work.
我正在尝试启动并运行Parcel ，但我无法进行基本设置。 I would like to serve a static HTML page that automatically reloads when it's changed.我想提供一个 static HTML 页面，该页面在更改时会自动重新加载。
When I go to http://localhost:1234 , Parcel serves my page.当我从 go 到http://localhost:1234时，Parcel 服务于我的页面。 If I change anything in the index.html , it does not reload... or it reloads with an empty response.如果我更改index.html中的任何内容，它不会重新加载......或者它会重新加载空响应。
versions版本
parcel: 1.12.4
npm: 6.12.1
node: v13.3.0
index.html index.html
<!doctype html>
<html>
<head>
<title>Tinsel town</title>
<script src="app.js"></script>
</head>
<body>
<h1>Tinsel…</h1>
</body>
</html>
app.js应用程序.js
// empty
Shell 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.
3 个解决方案
解决方案1
3 已采纳 2019-12-07 16:11:28
Vim and how it saves files was the the issue. Vim以及它如何保存文件是问题所在。
When you save in Vim it renames the file you're editing and saves the current buffer to the file location:当您在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)
This default behaviour can be changed by setting backupcopy to yes in your .vimrc :可以通过在.vimrc backupcopy设置为yes来更改此默认行为：
set backupcopy=yes " Necessary for ParcelJS to work
This causes Vim to write directly to the file you're editing, which in turn causes a modification event to fire in the filesystem.这会导致Vim直接写入您正在编辑的文件，进而导致在文件系统中触发modification事件。 Parcel see's this and does it's thing.包裹看到这个并做它的事情。
解决方案2
1 2022-03-29 17:38:21
Move script tag from head to body tag and add type="module" attribute.将 script 标签从head移动到body标签并添加type="module"属性。
like this:像这样：
<!doctype html>
<html>
<head>
<title>Tinsel town</title>
</head>
<body>
<h1>Tinsel…</h1>
<script type="module" src="./app.js"></script>
</body>
</html>
This should solve you problem.这应该可以解决您的问题。
解决方案3
0 2021-11-26 01:03:52
parcel watch allows you to hot reload both javascript & html but it will not create a running dev server so you will need to combine two npm commands to run the parcel dev server along with hot reloading. parcel watch允许您热重载javascript和html但它不会创建正在运行的开发服务器，因此您需要结合两个 npm 命令来运行parcel 开发服务器以及热重载。
Yo can create a script combining the two npm commands instead of running 2 separate terminal tabs你可以创建一个结合两个 npm 命令的脚本，而不是运行 2 个单独的终端选项卡
package.json script setup below as an example下面以 package.json 脚本设置为例
"scripts": {
"dev": "(parcel ./src/index.html) & parcel watch ./src/index.html",
"build": "parcel build ./src/index.html"
},
in your terminal run: npm run dev在你的终端运行： npm run dev
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.