Recientemente, apoyé un proyecto de Laravel que usa Laravel Mix como paquete de activos front-end (CSS y JS). He notado que, en el archivo JS principal, el desarrollador usó algunas reglas require() al inicio, y esas reglas require() se referían a otros archivos JS ubicados en el mismo directorio, y esos archivos JS son navegadores "normales". Script JS amigable (como jQuery, Bootstrap, GSAP, etc.). Después de esas reglas require() , el desarrollador usó reglas de import normales de ES6, refiriéndose a las dependencias de NodeJS y otros módulos dentro del proyecto.

Para explicar mejor lo que estoy tratando de mostrar...

árbol de archivos:

 . └── src ├── bootstrap.js ├── components │  ├── AnotherFeature.js │  ├── Carousel.js │  └── Something.js ├── jquery.js └── main.js

El archivo main.js ...

 require("jquery"); require("bootstrap"); import {AnotherFeature} from "./components/AnotherFeature"; import {Carousel} from "./components/Carousel"; import {Something} from "./components/Something"; class Main { constructor() { new AnotherFeature(); new Carousel(); new Something(); } } new Main();

E, incluso usando Laravel Mix (que usa Webpack), jQuery , $ y bootstrap están disponibles para ejecutarse a través de la consola del navegador.

Mi pregunta es: ¿cómo puedo hacer algo así fuera de Laravel Mix? Estoy trabajando en un proyecto que usa JS, y algunos recursos de terceros no son módulos ES6, y no puedo encontrar una solución hermosa para usarlos en mi proyecto. La forma en que Laravel Mix "importa" archivos JS adicionales es una buena manera de solucionar mis problemas, manteniendo la sencillez y todo en un archivo JS incluido.

Puedes encontrar mi proyecto en mi GitHub . Consiste en una plantilla de inicio de Wordpress que la gente quiere usar en mi trabajo, y este método de "requerir" e "importar" cosas será muy útil.

¡Gracias!