admin管理员组文章数量:1420204
I'm trying to get up and running with Parcel but I can't get a basic setup to work. I would like to serve a static HTML page that automatically reloads when it's changed.
When I go to http://localhost:1234, Parcel serves my page. If I change anything in the index.html, it does not reload... or it reloads with an empty response.
versions
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.
I'm trying to get up and running with Parcel but I can't get a basic setup to work. I would like to serve a static HTML page that automatically reloads when it's changed.
When I go to http://localhost:1234, Parcel serves my page. If I change anything in the index.html, it does not reload... or it reloads with an empty response.
versions
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.
3 Answers
Reset to default 5Vim and how it saves files was the the issue.
When you save in Vim it renames the file you're editing and saves the current buffer to the file location:
+------------+ +---------------------------------+
| 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:
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. Parcel see's this and does it's thing.
Move script tag from head to body tag and add type="module" attribute.
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.
parcel watch allows you to hot reload both javascript & html but it will not create a running dev server so you will need to bine two npm mands to run the parcel dev server along with hot reloading.
Yo can create a script bining the two npm mands instead of running 2 separate terminal tabs
package.json script setup below as an example
"scripts": {
"dev": "(parcel ./src/index.html) & parcel watch ./src/index.html",
"build": "parcel build ./src/index.html"
},
in your terminal run: npm run dev
本文标签： javascriptParcel does not reload changes to HTML pageStack Overflow
版权声明：本文标题：javascript - Parcel does not reload changes to HTML page - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744744058a2622782.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论