如何在webpacker中使用handlebars

Question

我有一个使用webpacker gem的Rails 5.1应用程序。我的package.json文件如下：

{
  "dependencies": {
    "@rails/webpacker": "^3.0.1",
    "handlebars": "^4.0.10",
    "handlebars-loader": "^1.6.0",
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.7.1",
    "webpack-merge": "^4.1.0"
  }
}

我的webpack/environment.js文件如下：

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');

environment.plugins.set(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);

environment.loaders.set('Handlebars', {
  test: /\.hbs$/,
  use: 'handlebars-loader'
});

module.exports = environment;

如果我在app/javascript/templates中创建一个foo.hbs文件，那么我可以使用以下代码成功编译该模板:

const template = require("templates/foo.hbs");
const context = {name: "Fred", age: 5};
const html    = template(context);

但我遇到困难的部分是如何添加handlebars helpers。 我想在文件夹app/javascript/handlebars-helpers中放置助手函数，但我不确定如何配置。 handlebars-loader有文档建议您如何指定helpers目录：https://github.com/pcardune/handlebars-loader/blob/master/examples/helperDirs/webpack.config.js，但我不清楚如何将其添加到Webpacker环境.js中。

- Francois

Answer 1

您应该能够在最新版本的Rails中像这样使其工作：

1. 添加必要的依赖项

yarn add handlebars
yarn add handlebars-loader

2.注册你的handlebars加载器

 // config/webpack/loaders/handlebars.js
 module.exports = {
   test: /\.hbs$/,
   loader: 'handlebars-loader'
 }


 // config/webpack/environment.js  
 const { environment } = require('@rails/webpacker')
 const handlebars = require('./loaders/handlebars')

 environment.loaders.prepend('handlebars', handlebars)
 module.exports = environment

Rails Webpacker有非常好的关于加载器的文档，在这里查看。

- dixpac

Answer 2

经过一些实验，我成功地通过更改我的webpack/environment.js文件来使其工作，代码如下：

const { environment } = require('@rails/webpacker');
const path = require("path");
const webpack = require('webpack');

environment.plugins.set(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
);

environment.loaders.set('Handlebars', {
  test: /\.hbs$/,
  use: {
    loader: 'handlebars-loader',
    query: {
      knownHelpersOnly: false,
      helperDirs: [
        path.resolve(__dirname, "../..", "app/javascript/handlebars-helpers")
      ]
    }
  }
});

module.exports = environment;

现在我可以将handlebars帮助方法放置在我的app/javascript/handlebars-helpers目录中，它们会自动被识别。

- Francois

---

我按照完全相同的步骤操作，但是无法使其正常工作。你能否分享一下你的辅助文件中的代码？ - Pushkar Kathuria