Cuando tengo tres archivos

prueba1.html

 <script src="main.js" defer></script> ... <div class="divOne"></div>

prueba2.html

 <script src="main.js" defer></script> ... <div class="divTwo"></div>

principal.js

 document.querySelectorAll('.divOne'); document.querySelectorAll('.divTwo');

Entonces obtendría un error en el archivo test1.html de que no se puede encontrar divTwo. En test2.html obtendría el error de que no se puede encontrar divOne.

¿Cómo puedo hacer que el código JavaScript sea óptimo para poder incluir mi archivo JavaScript para componentes reutilizables en cualquier página, pero si algo no existe porque no lo uso en el archivo, no debería pasar nada?