Parcel: How to enable HMR in code mode

[ZhengZhouXu]

❔ Question

I packaged the files by parcel api, setting up hmrport and hmrHostname did not take effect

🔦 Context

[ghost]

you are too sb to ask that question.

[DeMoorJasper]

To start the server using the api you have to call

await bundler.serve(port /* defaults to 1234  */, https /* defaults to false */);

⚠️ This also triggers bundler.bundle so don't call that function another time, it might slow down building and conflict

[ZhengZhouXu]

@DeMoorJasper await bundle.serve() will have an error

await is only valid in async function

I know the meaning of this error, but I don't know how to solve it.
This is my code:

const Bundler = require('parcel-bundler');
const Path = require('path');

const file = Path.join(__dirname, './index.html');

const options = {
  outDir: './dist', // The out directory to put the build files in, defaults to dist
  outFile: 'index.html', // The name of the outputFile
  publicUrl: './', // The url to server on, defaults to dist
  watch: true, // whether to watch the files and rebuild them on change, defaults to process.env.NODE_ENV !== 'production'
  cache: true, // Enabled or disables caching, defaults to true
  cacheDir: '.cache', // The directory cache gets put in, defaults to .cache
  minify: false, // Minify files, enabled if process.env.NODE_ENV === 'production'
  target: 'browser', // browser/node/electron, defaults to browser
  https: false, // Server files over https or http, defaults to false
  logLevel: 3, // 3 = log everything, 2 = log warnings & errors, 1 = log errors
  hmrPort: 0, // The port the hmr socket runs on, defaults to a random free port (0 in node.js resolves to a random free port)
  sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (not supported in minified builds yet)
  hmrHostname: '', // A hostname for hot module reload, default to ''
  detailedReport: false // Prints a detailed report of the bundles, assets, filesizes and times, defaults to false, reports are only printed if watch is disabled
}

const bundle = new Bundler(file, options);

await bundle.serve()

Thank you very much for your reply. My English is very bad. I use Google Translate. I can't express clearly in some places. Please forgive me.

[DeMoorJasper]

Well just wrapping it in an IIFE would be enough

const Bundler = require('parcel-bundler');
const Path = require('path');

const file = Path.join(__dirname, './index.html');

const options = {
  outDir: './dist', // The out directory to put the build files in, defaults to dist
  outFile: 'index.html', // The name of the outputFile
  publicUrl: './', // The url to server on, defaults to dist
  watch: true, // whether to watch the files and rebuild them on change, defaults to process.env.NODE_ENV !== 'production'
  cache: true, // Enabled or disables caching, defaults to true
  cacheDir: '.cache', // The directory cache gets put in, defaults to .cache
  minify: false, // Minify files, enabled if process.env.NODE_ENV === 'production'
  target: 'browser', // browser/node/electron, defaults to browser
  https: false, // Server files over https or http, defaults to false
  logLevel: 3, // 3 = log everything, 2 = log warnings & errors, 1 = log errors
  hmrPort: 0, // The port the hmr socket runs on, defaults to a random free port (0 in node.js resolves to a random free port)
  sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (not supported in minified builds yet)
  hmrHostname: '', // A hostname for hot module reload, default to ''
  detailedReport: false // Prints a detailed report of the bundles, assets, filesizes and times, defaults to false, reports are only printed if watch is disabled
}

(async function() {
    const bundler = new Bundler(file, options);

    await bundler.serve()
})();

[ZhengZhouXu]

@DeMoorJasper I tried it, but when I modify the file, hotloading does not take effect. I must manually refresh before they take effect.

[DeMoorJasper]

This isn't an issue with serving, this might be due to safe-write?

[ZhengZhouXu]

@DeMoorJasper
This seems to be a bit of a problem. When I introduced css and js, I found that all requests point to index.html.I found that all the compilation was performed normally, but the request looks like a problem.
However when I use ‘parcel index.html’ all the code works

Problems:

html:

Requests for other files:

code:

My file directory is like this:

This is my 'build.js' code:

const Bundler = require('parcel-bundler');
const Path = require('path');

const file = Path.join(__dirname, './index.html');

const options = {
  outDir: './dist', // The out directory to put the build files in, defaults to dist
  outFile: 'index.html', // The name of the outputFile
  publicUrl: './', // The url to server on, defaults to dist
  watch: true, // whether to watch the files and rebuild them on change, defaults to process.env.NODE_ENV !== 'production'
  cache: true, // Enabled or disables caching, defaults to true
  cacheDir: '.cache', // The directory cache gets put in, defaults to .cache
  minify: false, // Minify files, enabled if process.env.NODE_ENV === 'production'
  target: 'browser', // browser/node/electron, defaults to browser
  https: false, // Server files over https or http, defaults to false
  logLevel: 3, // 3 = log everything, 2 = log warnings & errors, 1 = log errors
  hmrPort: 0, // The port the hmr socket runs on, defaults to a random free port (0 in node.js resolves to a random free port)
  sourceMaps: true, // Enable or disable sourcemaps, defaults to enabled (not supported in minified builds yet)
  hmrHostname: '', // A hostname for hot module reload, default to ''
  detailedReport: false // Prints a detailed report of the bundles, assets, filesizes and times, defaults to false, reports are only printed if watch is disabled
};

(async function() {
  const bundle = new Bundler(file, options);
  await bundle.serve();
})()

This is my 'index.html' code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  test22
  <script src="./index.js"></script>
</body>
</html>

This is my 'index.css' code:

body {
  background: #ccc;
}

This is my 'index.js' code:

console.log(1)

[mischnic]

Using ./ as a publicUrl during development doesn't make sense. Parcel checks if the url's path starts with the publicUrl, e.g. http://localhost:1234/1458-api-hmr.9ad09f98.css => 1458-api-hmr.9ad09f98.css doesn't start with ./.

Using the default publicUrl: '/' works with the code you provided.