如何在 webpacker 中使用把手答案

【问题标题】：How to use handlebars with webpacker如何在 webpacker 中使用把手
【发布时间】：2018-02-17 16:24:04
【问题描述】：

我有一个使用 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);

但我遇到困难的部分是如何添加车把助手。我想要一个文件夹 app/javascript/handlebars-helpers 并在其中放置辅助功能，但我不确定如何配置它。 handlebars-loader 的文档建议您如何指定帮助程序目录：https://github.com/pcardune/handlebars-loader/blob/master/examples/helperDirs/webpack.config.js，但我不清楚如何将其添加到 environment.js 以用于 webpacker。

【问题讨论】：

标签： ruby-on-rails handlebars.js webpacker webpack-handlebars-loader

【解决方案1】：

经过一些试验，我能够通过将 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;

现在我可以在我的 app/javascript/handlebars-helpers 目录中放置把手辅助方法，它们会被自动拾取。

【讨论】：

我做了完全相同的步骤，但无法使其工作。您可以共享帮助文件中的代码吗？

【解决方案2】：

你应该能够在最新的 Rails 版本中让它像这样工作：

1.添加必要的依赖项

yarn add handlebars
yarn add handlebars-loader

2.注册您的车把加载器

 // 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 有关于加载器的非常好的文档，请查看 here

【讨论】：