Uso Handlebars como un subproyecto dentro de mi proyecto Webpack más grande. Hay una sola plantilla HBS, combinada con un par de fuentes de datos/JSON diferentes para precompilar varias plantillas HTML, necesarias en otras partes del proyecto. Los construyo manualmente, usando un script npm y handlebars-webpack-plugin .
Lo que necesito son una especie de "parciales basados en datos". Esto significa que necesito insertar un parcial específico de acuerdo con el valor de datos dado. Es decir, si las fuentes de datos van como:
// dev.json: { "header_css": "styles/devel/header.css" } // prod.json: { "header_css": "prod/header.css" }entonces en la plantilla HBS necesitaría algo como:
{{#import header_css }} el cual debe ser reemplazado por el respectivo archivo CSS. No pude encontrar nada similar a #import en Handlebars, así que creé un ayudante personalizado:
// webpack.config.js: ... new HandlebarsPlugin({ ... helpers: { "import": require("./src/hbs/helpers/import.js"), } }) // import.js: ... const fs = require("fs") module.exports = (par) => { return fs.readFileSync(path + par) }Funciona bien. Sin embargo, el contenido del archivo vinculado se coloca tal cual. Es útil en algunos casos, pero a veces también necesito importar los parciales de Handlebars de la misma manera, para que se compilen. Si creo, es decir:
// partials/heading.hbs: <h1>{{title}}</h1>y luego uso:
// data.json: { "title": "My Title." } // template.hbs: <body> {{> partials/heading.hbs}}el contenido del encabezado se carga, procesa y compila como una plantilla de Handlebars:
<body> <h1>My Title.</h1>Pero si lo importo usando el ayudante:
// data.json { "title": "partials/heading.hbs" } // template.hbs <body> {{#import title}} ...no está compilado y la salida contiene el código fuente de Handlebars:
<body> <h1>{{title}}</h1> La pregunta es, ¿cómo puedo hacer que el {{title}} del archivo importado también se compile?