webpack - 如何通过 webpack（handlebars-loader）在车把中使用助手

Question

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

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

这是我的代码：

网络应用程序：

{
        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[]查询参数添加到加载程序：

  装载机：“车把装载机？helperDirs[]=”+ __dirname +“模板/助手”

• 将 helpers 目录路径添加到resolve.moduleswebpack 配置文件的属性

可悲的是，它们都不起作用。

Answer 1

webpack@3.5.5 and handlebars-loader@1.5.0:

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

Update 2021: also works with webpack@4+.

Answer 2

对我来说，这些方法都不起作用。我使用runtime选项来创建自己的 Handlebars 实例（感谢此评论）：

webpack.config.js

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

路径/到/handlebars.js

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

Answer 3

以下配置在 webpack 4 中为我工作

// webpack
{
    test: /\.hbs$/,
    use: [{
        loader: 'handlebars-loader?runtime=handlebars/runtime',
        options: {
            precompileOptions: {
                knownHelpersOnly: false,
            }
        }
    }]
}


// helpers/ifEq.js
module.exports = function (a, b, opts) {
    if (a === b) {
        return opts.fn(this);
    }
    return opts.inverse(this);
}