0

Buenas soy nuevo en Laravel, experimentando un poco quisiera poder usar namespace de JS pero por alguna razón los archivos "se aislan" es decir, cargo 2 archivos con el mismo namespace pero no puedo acceder a los metodos del otro.

Los archivos de Js estan siendo cargados con webpack.mix.js y al parecer ese es el problema ya que si uso los archivos en algun otro proyecto sin usar laravel funciona bien. Este es mi archivo JS "Comunes"

var lavanderia = lavanderia || {};
lavanderia.Comunes = lavanderia.Comunes || {};

lavanderia.Comunes = (function() {
    "use strict";
    let ComunesLoad = function() {        
        this.Prueba = function(){
            console.log("Prueba")
        }                
    };

    return new ComunesLoad();
})();

Este es mi archivo JS "Recoleccion"

var lavanderia = lavanderia || {};
lavanderia.Recoleccion = lavanderia.Recoleccion || {};

lavanderia.Recoleccion = (function() {
    "use strict";
    let RecoleccionLoad = function() {        

        let Comunes = lavanderia.Comunes;

        this.Initialize = function(){
            console.log(lavanderia)
            Comunes.Prueba();
        }
    };

    return new RecoleccionLoad();
})();
(function($, window, document) {
    "use strict";
    $(function() {
        lavanderia.Recoleccion.Initialize();
    });
})(window.jQuery, window, document);

De esta forma los cargo con webpack.mix.js

//--------------------------COMUNES
mix.styles('resources/comunes/css/comunes.css', 'public/css/comunes.css')
mix.js('resources/comunes/js/lavanderia.comunes.js', 'public/js/lavanderia.comunes.js');


//--------------------------RECOLECCION
mix.js('resources/recoleccion/js/lavanderia.recoleccion.js', 'public/js/lavanderia.recoleccion.js');

Por ultimo el llamado en la vista

<!--COMUNES JS-->
<script src="{{asset('js/lavanderia.comunes.js')}}"></script>
<!--RECOLECCION JS-->
<script src="{{asset('js/lavanderia.recoleccion.js')}}"></script>

La idea es muy sencilla, poder acceder al metodo Prueba en el archivo "Comunes" desde el archivo "Recoleccion" pero no lo consigo, Agradeceré muchísimo su apoyo

Por ultimo dejo el error de consola que me arroja el navegador

Error de consola

1 respuesta 1

0

Luego de investigar un poco me di cuenta que Webpack usa el objeto exports para exportar modulos y funciona de la misma manera en Laravel a continuación dejo mi código

var lavanderia = lavanderia || {};
lavanderia.Comunes = lavanderia.Comunes || {};

lavanderia.Comunes = (function() {
    "use strict";
    let ComunesLoad = function() {        
        exports.Initialize = function(){
            console.log("Prueba");
        }                
    };

    return new ComunesLoad();
})();

Para lograr usar esa función en otro modulo basta con hacer uso de require('')

var lavanderia = lavanderia || {};
lavanderia.Recoleccion = lavanderia.Recoleccion || {};

lavanderia.Recoleccion = (function() {
    "use strict";
    let RecoleccionLoad = function() { 

        const Comunes = require("../../comunes/js/lavanderia.comunes")

        this.Initialize = function(){         
         console.log(Comunes.Initialize())         
        }
    };

    return new RecoleccionLoad();
})();
(function($, window, document) {
    "use strict";
    $(function() {
        lavanderia.Recoleccion.Initialize();
    });
})(window.jQuery, window, document);

Dato curioso en un principio pensé que la ruta especificada en el required es la ruta donde se compila el js pero no, esa ruta es a partir de la ubicación de los archivos antes de ser compilados

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.