Wie man Lenker mit webpacker verwendet

Question

Ich habe eine Rails 5.1 App, die den webpacker gem verwendet. Meine package.json Datei ist wie folgt:

{ 
    "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" 
    } 
} 

Und meine webpack/environment.js Datei ist wie folgt:

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; 

wenn ich eine foo.hbs Datei in app/javascript/templates dann ich kann erfolgreich diese Vorlage mit dem folgenden Code kompilieren:

const template = require("templates/foo.hbs"); 
const context = {name: "Fred", age: 5}; 
const html = template(context); 

Aber der Teil, den ich Schwierigkeiten haben, bin mit, wie Lenker Helfer hinzuzufügen. Ich hätte gerne einen Ordner app/javascript/lenker-helper und platziere dort Hilfsfunktionen, aber ich bin mir nicht sicher wie ich das konfigurieren soll. brackets-loader hat eine Dokumentation, die vorschlägt, wie man ein Helferverzeichnis angeben kann: https://github.com/pcardune/handlebars-loader/blob/master/examples/helperDirs/webpack.config.js aber mir ist nicht klar, wie ich dies zu environment.js für webpacker hinzufügen würde.

Answer 1

nach einigem Experimentieren konnte ich diese Arbeit bekommen durch meine webpack/environment.js Datei ändern zu lesen wie folgt:

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; 

Jetzt Lenker Hilfsmethoden in meiner app/javascript zu platzieren/Ich bin der Lage, Lenker-Helfer-Verzeichnis und sie werden automatisch abgeholt.