Estoy creando una aplicación con Express y ReactJS. Para dividir componentes grandes, uso la carga diferida y en el paquete web estoy agregando chunkhash para consultar para crear versiones en navegadores y servir nuevas versiones. Pero desafortunadamente, mi archivo de paquete se sirvió en la plantilla EJS ya que estoy usando Express como backend y es una etiqueta de script simple.
<script src="/build/bundle.js" type="text/javascript" defer></script>Entonces, ¿cómo es posible proporcionar control de versiones en las plantillas de EJS? ¿Cuáles son las mejores prácticas en este caso?
Espero no haber hecho una pregunta estúpida.
¡Gracias por adelantado!
Bueno, es totalmente factible. Al final del día, las etiquetas de script son cadenas, ¿verdad?
Esto es lo que hago, use assets-webpack-plugin para crear un archivo json con los resultados de la agrupación de paquetes web.
Digamos que crea un archivo assets.json .
Mientras configura el servidor express, solicite ese archivo y colóquelo en locales. req.locals.assets = require('path/to/assets.json')
Ahora todo lo que necesita es crear la etiqueta de cadena e incluirla en la plantilla. Para esto, puede escribir un asistente ejs que tome una serie de archivos js que desea que estén en su plantilla y devuelva etiquetas de script.
Algo como
function renderJSTags(jstags) { let out = ''; _.each(jstags, function (js) { if (typeof js === 'string') { out = out + renderTag({ 'name': 'script', 'opts': objToKeyval({ 'src': js, 'nonce': `${_res.locals.nonce}` // you should be using nonce along with good CSP }) }); } else { out = out + renderTag({ 'name': 'script', 'opts': objToKeyval(js) }); } }); return out; } function objToKeyval(obj) { return _.map(obj, function (val, key) { return {'key': key, 'val': val}; }); } function renderTag(obj) { let tag = '<' + obj.name + ' '; _.each(obj.opts, function (opt) { if ((obj.name === 'link' || obj.name === 'script') && (opt.key === 'href' || opt.key === 'src') && !url.parse(opt.val, false, true).host) { opt.val = opt.val; } tag += opt.key + '="' + opt.val + '" '; }); if (obj.selfclose) { tag += '/>'; return tag; } tag += '></' + obj.name + '>'; return tag; }Esto nos lleva al paso final en los controladores de ruta, pase una serie de etiquetas js a la vista junto con los datos que esté pasando.
router.get('/', (req, res, next) => { const assets = req.locals.assets; const payload = { // your data 'name' : 'John Doe', 'js': [ assets.webpackEntryPoint1.js, assets.webpackEntryPoint2.js, ] } res.render('/path/to/template', payload); });