Встраивание файлов HTML с веб-пакетом
Я собираюсь перенести большой веб-скрипт для одного из наших проектов в веб-пакет.
Одна особенность, которую он имеет, - это прохождение /views
каталог и копирует содержимое HTML-файлов в основную index.html
файл. Это позволяет нам легко использовать шаблонную функцию KnockoutJS, не помещая все в один файл самостоятельно. Что-то вроде этого:
for relative_path, full_path in walk(os.path.join(base, "views")):
with open(full_path) as f:
index.append("""<script type="text/html" id="{0}">""".format(relative_path))
index.extend(f)
index.append("</script>")
В идеале я хотел бы иметь возможность сделать что-то вроде require('./views')
и пусть он вставит каждый .html
подать как <script type="text/html" id="views/foo">...</script>
вставив текст в тег скрипта и установив id
к пути к файлу. У нас есть почти 100 различных шаблонов, поэтому я хотел бы избежать require()
в индивидуальном порядке.
Можно настроить html-loader
или же html-webpack-plugin
сделать это? Мне интересно, придется ли мне писать свой собственный плагин для веб-пакетов или есть ли способ настроить существующий плагин так, чтобы он делал то, что я хочу.
Спасибо!
1 ответ
Я думаю, что вы можете сделать это, используя require.context и загрузчик HTML.
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
// requires and returns html files in the views directory
var modules = requireAll(require.context("./views", true, /^\.html$/));
modules.forEach(function(htmlTemplate){
// code to add each template to document.body
}