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);

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

Answer 1

经过一些实验后，我能够通过将我的webpack / environment.js文件更改为以下内容来实现此目的：

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

Answer 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

如何使用带有webpacker的把手

2 个答案: