javascript - 如何通过 web pack 加载 Handlebars 模板数组？

Question

有没有办法使用 Webpack 编译模板目录并存储在数组对象中？

说明:我现在正在使用 Handlebars 模板列表。我在 gulp 中使用 handlebars compiler 预编译模板列表。

gulp.src('client/src/templates/**/*.hbs')
  .pipe(gulp_handlebars({
      handlebars: handlebars,
       compilerOptions:{
        knownHelpers: helpers,
        knownHelpersOnly:true}
      }))
      .pipe(wrap('Handlebars.template(<%= contents %>)'))
      .pipe(declare({
        namespace: 'appname.templates',
        noRedeclare: true, 
        processName: function(filePath) {
          return declare.processNameByPath(filePath.replace('client/src/templates/', ''));
        }
      }));

然后我会通过 appname.templates 数组访问模板。它工作正常。

现在，我正在转向 Webpack。如果我使用 handlebars-loader ,它允许我按名称要求每个模板，例如

var template = require("./file.handlebars");

有没有办法将一个目录中的所有模板作为一个数组，如

var templates = require("./*.handlebars");

Answer 1

我通常会去你有你的模板的文件夹，并有一个 templates/index.js 文件，例如:

export templateA from './templateA.handlebars'
export templateB from './templateB.handlebars'
export templateC from './templateC.handlebars'
...

然后你可以这样做:

import * as templates from './templates'

templates 是一个包含所有模板的对象。您还可以执行 templates.templateA 以按名称访问它们。