Watchify可以获取对html文件的更改吗？

Question

我使用babel-plugin-transform-html-import-to-string将html模板文件导入到javascript组件中。

当我使用watchify时，如果html已经改变，它不会更新。只更改Javascript文件。npm脚本如下所示：

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

由于这不起作用，我使用watch代替，如下所示，但我的构建至少比以前慢了5秒，因为它们是即时的。

browserify脚本为browserify -t [babelify ext .js] src/index.js -o public/bundle.js的watch 'npm run browserify' src/ -d --interval=1

有人知道我如何在不牺牲快速重建的情况下对html文件更改运行browserify吗？

Answer 1

问题是browserify永远看不到对.html文件的引用，因为babelify正在用变量和HTML字符串替换它们。

如果您希望watchify监视.html文件并在它们发生更改时重新构建包，则应允许babelify将import some from './some.html'等语句转换为var some = require('./some.html')，并应使用基于browserify的转换(如stringify)来转换所需的内容：

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

然后，Browserify/watchify将看到包含在捆绑包中的.html文件，并监视它们的更改。