Can Watchify pick up changes to html files?

Question

I import html template files into my javascript components using babel-plugin-transform-html-import-to-string .

When I use watchify, it doesn't update if an html has been changed. Only Javascript file changes. The npm script goes something like this:

watchify -p browserify-hmr -t [babelify ext .js .html] src/index.js -o public/bundle.js

Since this doesn't work I am using watch instead, as shown below, but my builds are at least 5 seconds slower than before, when they were instant.

watch 'npm run browserify' src/ -d --interval=1 where the browserify script is browserify -t [babelify ext .js] src/index.js -o public/bundle.js

Anyone know how I can run browserify on html file changes without sacrificing fast rebuilds?

Answer 1

The problem is that browserify never sees the references to the .html files, as babelify is replacing them with variables and HTML strings.

If you want watchify to watch the .html files and to rebuild the bundle if they change, you should allow babelify to transpile statements like import some from './some.html' to var some = require('./some.html') and should use a browserify-based transform (like stringify ) to transform the required content:

watchify \
  -p browserify-hmr \
  -t [babelify ext .js] \
  -t [stringify ext .html] \
  src/index.js -o public/bundle.js

Browserify/watchify will then see the .html files as being included in the bundle and will watch them for changes.