¿Cuál es la mejor manera de mantener pequeños los archivos JavaScript durante el desarrollo?

Otras respuestas lo remiten a bibliotecas como RequireJS y Webpack / Browserify. Hasta hace poco, esa era tu mejor apuesta.

La especificación actual de Javascript (conocida como ECMAScript 6 o ECMAScript 2015) que es Javascript “oficial” a partir de junio de 2015 incluye la sintaxis para crear módulos para importación / exportación. Desafortunadamente, los navegadores web modernos aún no se han puesto al día con la implementación total de soporte para esta sintaxis, pero puede solucionarlo utilizando un transpilador como BabelJS. Le recomiendo que siga esta ruta. Todavía tiene que traer una biblioteca externa (Babel), pero además de los módulos que está buscando, puede usar TODAS las funciones en ES6 con compatibilidad con versiones anteriores para navegadores antiguos / actuales. Esto también lo ayudará a convertirse en un mejor desarrollador de Javascript. En el futuro, cada vez más código que encontrará “en la naturaleza” se escribirá con las funciones de ES6, por lo que no se está haciendo ningún favor al evitarlo.

16. Explorando ES6 – Módulos

Babel · El compilador para escribir JavaScript de próxima generación

Use un sistema de carga de módulos como RequireJS para crear muchos módulos pequeños y enfocados que se pueden cargar como dependencias en otros módulos. Esto lleva a una mejor arquitectura. La inyección de dependencia de Angular también se presta bien a este tipo de arquitectura.

Creo que encontrarás tu respuesta en este video

Básicamente, webpack puede (entre otras cosas) usarse para compilar y agrupar sus archivos js, así como otros activos.

De manera similar a la forma en que los paquetes npm pueden ‘requerirse’ entre sí, webpack puede hacer algo similar en el front-end.

Otra herramienta de compilación que también resuelve su problema es browserify

Browserify

Realmente debería comenzar a usar estos yo mismo lol