0

Soy nuevo en Laravel y Vite. Quiero crear distintos archivos .js para tener cierto orden en los scripts. El problema es que no sé cómo llamar a las funciones de estos scripts desde las vistas.

Por ejemplo, tengo resources/js/calendar.js que contiene un calendario que quiero llamar desde clockin.blade.php. Clockin.blade.php extiende app.blade.php que contiene @vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/calendar.js']) en el head. De esta manera si pongo console.log("hola mundo"); en calendar.js y accedo a clockin.blade.php, la consola muestra "hola mundo". Sin embargo, si el console.log lo meto dentro de una función:

function holaMundo(){
    console.log("hola mundo");
}

Y la llamo desde clockin.blade.php:

<script>
     holaMundo();
</script>

En consola me sale el error fichaje:62 Uncaught ReferenceError: holaMundo is not defined.

He probado a meter el script dentro de @push('scripts') pero nada.

También he probado a poner <script src="/resources/js/calendar.js"> y otras rutas relativas pero siempre sale el error http://127.0.0.1:8000/resources/js/calendar.js net::ERR_ABORTED 404 (Not Found). He probado muchas cosas más pero sin ningún resultado.

He probado a usar el helper asset dentro de la etiqueta pero claro, eso busca calendar.js en la carpeta public cuando está en resources.

Qué tengo que hacer para poder llamar a las funciones de los distintos .js?

3 respuestas 3

1

calendar.js no existe por separado en la carpeta pública. Probablemente app.js esté haciendo un import de él.

El llamado a console.log contenido en ese archivo se ejecuta cuando importas la versión compilada de app.js con vite.

La declaración de una función que a su vez invoque console log no te funciona porque app.js es un módulo (puedes ver en el html que se inserta como <script type="module" src="...",>) Y sus funciones y variables no están en el espacio global.

Podrías intentar declarar la función al espacio global como

globalThis.holaMundo = () => console.log('hola mundo')

Pero eso sólo resuelve el caso puntual. El tema de fondo es que no debieras interactuar con el contenido de la compilación desde un Tag en el html. Para eso te serviría más copiar tu calendar.js a mano a la carpeta pública e insertarlo con una etiqueta script común

2
  • Muchas gracias por la respuesta tan completa! Me sorprende no haber encontrado una forma estandarizada de hacer esto. Es porque noes común manejar varios archivos js en laravel o es que lo normal es incluirlos en public durante la fase de desarrollo? Quiero aprender lo mejor posible y me gustaría saber cual es la forma más profesional de hacer esto.
    – matsrom
    el 29 jul. a las 21:43
  • eso se podía hacer cuando la herramienta era laravel mix (webpack) que compila a ES5. Vite compila a ESM. De todos modos eso de generar varios archivos siempre terminaba (para mi) en código duplicado. En el sentido que sí, generaba mi calendar y todas sus dependencias, pero todas las que tuvieran en común con app.js estaban en ambos, el ahorro por separar los entrypoints era nulo salvo por módulos muy puntuales.
    – ffflabs
    el 30 jul. a las 2:11
0

Yo lo plantearía de la siguiente forma, en el archivo clockin.blade.php, crearìa una sección al final;

{{-- :::::::::::::::::::::: --}}
{{-- :::::::::::::::::::::: --}}
{{--        JS              --}}
{{-- :::::::::::::::::::::: --}}
{{-- :::::::::::::::::::::: --}}
@section('js-scripts')
<script>
   function holaMundo(){
      console.log("hola mundo");
   }
</script>
@endsection

Luego, en app.blade.php lo llamo al final del template con;

...
        {{-- :::::::::::::::::::::: --}}
        {{-- Javascript --}}
        {{-- :::::::::::::::::::::: --}}
        @yield('js-scripts')
    </body>
</html>

Entonces en cada template puedo tener scripts personalizados y ademas ayudamos a no cargar todo en cada pagina del sitio.

1
  • Hola Javier! Pensaba usar eso como último recurso ya que habrá veces que necesite reutilizar código js o simplemente por orden y facilidad de mantenimiento. Tiene que haber una forma de tener varios archivos .js, no?
    – matsrom
    el 29 jul. a las 14:34
0

exporta la funcion con: export , luego la importas con el nombre del archivo dónde esta la función:

const { my_function  } = require("mi_archivo/funcion"); // importas

exports.my_function = () => {} // exportas

Tu Respuesta

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

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