首页 文章

如何使用带有webpacker的把手

提问于
浏览 次
1

我有一个rails 5.1 app，它使用了webpacker gem . 我的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-loader有文档建议如何指定帮助程序目录：https://github.com/pcardune/handlebars-loader/blob/master/examples/helperDirs/webpack.config.js但是我不清楚如何将它添加到webpacker的environment.js中 .

ruby-on-rails handlebars.js webpacker webpack-handlebars-loader

2 回答

  • 0

    经过一些实验，我能够通过更改我的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目录中放置把手辅助方法，它们会自动被拾取 .

    回复于
  • 0

    你应该能够在最新的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

    回复于

相关问题