Estoy trabajando en una aplicación con Rails 6 / Webpack que usa diferentes subdominios, y para cada subdominio asociamos diferentes usuarios, hojas de estilo, etc. Me gustaría importar condicionalmente las imágenes de mi proyecto según el dominio. Actualmente, mi app/javascript/pack/application.js hace esto para importar imágenes comunes
require.context('../images',true) Sin embargo, si creo una carpeta separada para las imágenes (digamos images_subdomainfoo ) e intento alguna importación condicional como
const foo = import("images_subdomainfoo/bar.png") esta imagen se compila incluso cuando el archivo que contiene la declaración no se importa (por ejemplo, coloqué esa línea en un archivo subdomainfoo.js y luego agregué esta línea en mi archivo de encabezado HTML
<%= javascript_pack_tag 'subdomainfoo', 'data-turbolinks-track': 'reload' if request.subdomain == "foo" %>pero la imagen se carga independientemente del subdominio).
He visto algunos enfoques como NormalModuleReplacementPlugin , pero no estoy seguro de cómo incorporarlo en una aplicación de Rails 6, ya que implica iniciar webpacker con opciones especiales como npx webpack --env APP_TARGET=VERSION_A
Cualquier sugerencia sería apreciada.
Puede agregar la siguiente línea a su _head.html.erb (por encima de javascript_pack_tag ):
<script> window.subdomain = '<%= request.subdomain %>' </script>Esto garantizaría que su nombre de subdominio se adjunte al objeto global al que se puede acceder en Javascript.
Luego, puede agregar la siguiente línea a su app/javascript/pack/application.js , suponiendo que sus imágenes se coloquen dentro de carpetas con el nombre de sus subdominios.
const foo = import(`images_${window.subdomain}/bar.png`)