Estoy migrando una gran aplicación web antigua de Symfony a Webpack Encore. Por ahora, instalé todas las bibliotecas js, pero encontré un problema: Error de referencia no detectado: xxx no está definido
Mi estructura es la siguiente.
En common.js cargo bibliotecas: Ej. importar 'sensor de cambio de tamaño';
En una vista, trato de usar: new ResizeSensor(jQuery('#div-left'), function(){fixElements();});
Recibí este error: "Error de referencia no detectado: ResizeSensor no está definido"
Tuve que importar jquery, highcharts y confirmation2 globalmente, pero no estoy seguro de querer hacer esto con todas las bibliotecas.
Entonces, ¿hay alguna forma de importar todo el contenido de común en todas las vistas que se extiende desde la base?
En una vista, trato de usar: new ResizeSensor(jQuery('#div-left'), function(){fixElements();});
La importación de libs en sus archivos js no hace que estén "disponibles" en el ámbito global. Así que no puedes simplemente usarlos en tus vistas como
{% block javascripts %} {{ parent() }} <script> $(function(){ new ResizeSensor(jQuery('#div-left'), function(){fixElements();}); }); </script> {% endblock %}En realidad, solo están disponibles en ese archivo (common.js)
Podría intentar usar special global. sintaxis O intenta convertirlos en autoProvidedVariables . Tienes que jugar con lo que funciona mejor para ti.
global
// in your common.js import ResizeSensor from 'resize-sensor'; global.ResizeSensor = ResizeSensor; // now is ResizeSensor available globaly autoProvideVariables
// in webpack.config.js .autoProvidejQuery() .autoProvideVariables({ ResizeSensor: require.resolve('resize-sensor'), }ahora podrías usarlos en tus vistas.