3

我有一个使用 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 中。

4

2 回答 2

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 目录中放置把手辅助方法，它们会被自动拾取。

于 2017-09-08T18:23:26.910 回答
1

你应该能够在最新的 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 有关于加载器的非常好的文档，在这里查看

于 2018-09-14T13:05:39.750 回答