ウェブパッカーでハンドルバーを使用する方法

Question

私はウェブパッカーの宝石を利用するレール5.1アプリを持っています。

{ 
    "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ファイルは次のとおりです：次のように私のpackage.jsonファイルがある

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; 

私はその後、アプリ/ジャバスクリプト/テンプレートで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にどのように追加するかはわかりません。いくつかは、私は次のように読み取るために、私のWebPACK/environment.jsファイルを変更することで、この作業を取得することができた実験後の

Answer 1

：

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; 

は今、私は私のアプリ/ javascriptの/でハンドルヘルパー・メソッドを配置することができますよhandlebars-helpersディレクトリに置かれ、自動的に取得されます。