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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744744058a4591201.html
评论列表（0条）