Este problema é resolvido utilizando o conceito de import e export.
Import e Export são palavras-chave do JavaScript usadas para implementar o conceito de módulos ES6. Eles permitem que você divida seu código em partes menores e reutilizáveis, chamadas módulos, e compartilhe funções, objetos ou valores entre esses módulos sem a necessidade de ficar importando também as dependências.
export: É usado para exportar funções, objetos ou valores de um módulo, tornando-os disponíveis para serem importados por outros módulos. Você pode ter várias exportações em um único módulo.
//Exemplo de exportação:
// module.js
export function minhaFuncao() {
// ...
}
export const minhaVariavel= 42;
import: É utiizado para importar funções, objetos ou valores exportados por outros módulos para o módulo atual.
Exemplo:
// main.js
import { minhaFuncao, minhaVariavel} from './module.js';
myFunction();
console.log(minhaVariavel);
E dentro do arquivo html você pode importar um módulo usando a tag comum de importação adicionando o atributo type="module", por exemplo:
<script type="module" src="meu-modulo-javascript.js"></script>
E dentro deste módulo você pode fazer import de outros módulos como explicado anteriormente.
Esta é a solução mais moderna atualmente, mas outras soluções foram criadas como o require. Você pode encontrar mais detalhes sobre o require em : https://requirejs.org/ e mais detalhes sobre como usar módulos ES6 (import e export) em export e import