2017-01-25 19 views
3

Я импортирую файлы шаблона html в свои компоненты javascript, используя babel-plugin-transform-html-import-to-string.Можно ли отслеживать изменения в html-файлах?

Когда я использую watchify, он не обновляется, если html был изменен. Изменяется только файл Javascript. Сценарий НПМ выходит что-то вроде этого:

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

Поскольку это не работает Я использую смотреть вместо этого, как показано ниже, но мой строит, по крайней мере, 5 секунд медленнее, чем раньше, когда они были мгновенно.

watch 'npm run browserify' src/ -d --interval=1 где сценарий browserify является browserify -t [babelify ext .js] src/index.js -o public/bundle.js

Каждый знает, как я могу запустить browserify на изменения HTML файлов без потери быстро перестраивает?

ответ

3

Проблема в том, что браузер не видит ссылки на файлы .html, так как babelify заменяет их переменными и строками HTML.

Если вы хотите watchify смотреть .html файлы и восстановить пакет, если они изменяются, вы должны позволить babelify к transpile заявления, как 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 файлы, которые включены в пакет и будет следить за их изменениями.

+1

Это сделало, спасибо! Вот немного уменьшенный синтаксис, который я использовал 'watchify -p browserify-hmr -t [babelify ext .js] -t [stringify ext .html] src/index.js -o public/bundle.js' – MauroPerez

+1

@MauroPerez Бог это вождение меня орехи. –