Digamos que tengo dos archivos JS, ambos obviamente representativos de archivos más grandes. El primero es root/foo.js :
let foo = true; El siguiente es root/foopolice.js . Este código depende de root/foo.js y, por sí mismo, arroja un error:
function patrol(){ if (foo) alert("Found foo"); // ReferenceError Finalmente, está root/index.html , que vincula los dos:
<script src="/foo.js"></script> <script src="/foopolice.js"></script> <button onclick="patrol()">Patrol for foo</button> La pregunta es, ¿cómo "incluiría" la variable definida en root/foo.js directamente en root/foopolice.js sin combinar los dos en uno? El uso de ambas etiquetas de secuencias de comandos no es suficiente, porque root/foopolice.js todavía advertiría de un error inexistente mientras lo edito. Estoy abierto a soluciones que usen JQuery o simplemente Vanilla JS, según las mejores prácticas.
Por lo general, se utiliza un proceso de compilación para crear un paquete JS que extraiga y combine todo el código necesario de varios archivos (consulte Parcel o ESBuild ).
Sin un proceso de compilación, los módulos JS modernos (también conocidos como "módulos ES") podrían importarse usando <script type="module"> . JQuery se puede evitar por completo en 2020 y más allá.
biblioteca.js
const name = 'Jane Doe' export { name }principal.js
import { name } from './library.js' function sayHello() { console.log(`hello ${name}!`) } window.addEventListener('DOMContentLoaded', event => { document.querySelector('button').addEventListener('click', sayHello) })índice.html
<script type="module" src="main.js"></script> <button>Say Hello</button>