Question

我在项目中使用Handlebars并使用webpack捆绑模板。我正在使用handlebars-loader来编译模板。当我创建一个小帮手时，我遇到了问题。当我在模板中使用帮助程序时，Webpack显示此错误：

You specified knownHelpersOnly, but used the unknown helper withCurrentItem - 5:4

这是我的代码：

Webapck：

{
        test   : /\.(tpl|hbs)$/,
        loader : "handlebars-loader?helperDirs[]=" + __dirname + "templates/helpers"
        // use    : 'handlebars-loader?helperDirs[]=false' + __dirname + 'templates/helpers'
},

助手（项目/模板/助手/ withCurrentItem.js）：

export default function (context, options) {
  const contextWithCurrentItem = context

  contextWithCurrentItem.currentItem = options.hash.currentItem

  return options.fn(contextWithCurrentItem)
}

模板文件（project / templates / products.tpl）：

{{> partials/filters}}
<ul class="u-4-5">
  {{#each data.products}}
    {{> partials/product}}
    {{withCurrentItem ../styles currentItem=this}}
  {{/each}}
</ul>

我试图解决问题并通过互联网搜索但我找不到任何东西。这就是我试过的：

将helperDirs[]查询参数添加到加载程序：

loader：“handlebars-loader？helperDirs [] =”+ __dirname +“templates / helpers”
将帮助程序目录路径添加到webpack配置文件的resolve.modules属性

可悲的是，他们都没有工作。

Answer 1

对我来说，这些方法都不起作用。我使用runtime选项创建了自己的Handlebars实例（由于使用了comment）：

webpack.config.js

module: {
  rules: [
    {
      test: /\.(handlebars|hbs)$/,
      loader: 'handlebars-loader',
      options: {
        runtime: path.resolve(__dirname, 'path/to/handlebars'),
      },
    },

path / to / handlebars.js

const Handlebars = require('handlebars/runtime');
Handlebars.registerHelper('loud', function(aString) {
  return aString.toUpperCase();
});
module.exports = Handlebars;

Answer 2

webpack@3.5.5 和 handlebars-loader@1.5.0 ：

{
  test: /\.hbs$/,
  loader: 'handlebars-loader',
  options: {
    helperDirs: path.join(__dirname, 'modules/helpers'),
    precompileOptions: {
      knownHelpersOnly: false,
    },
  },
},

Answer 3

以下配置在webpack 4中对我有用

{
    test: /\.hbs$/,
    use: [{
        loader: 'handlebars-loader',
        options: {
            helperDirs: path.resolve(__dirname, '..', 'src/common/handlebars/helpers')
        }
    }]
}

如何在webpack（把手 - 装载机）的把手中使用助手

3 个答案: