4

我使用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 秒，当时它们是即时的。

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

任何人都知道如何在不牺牲快速重建的情况下在 html 文件更改上运行 browserify？

4

1 回答 1

5

问题是 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文件包含在包中，并将监视它们的更改。

于 2017-01-25T22:13:05.637 回答