Tengo un archivo HTML ~/docs/index.html que tiene un script JavaScript interno para permitir la entrada/salida con dos áreas de texto. Este script JS interno, a su vez, llama a un script JS externo ~/src/Main.js que he importado en el encabezado de mi archivo HTML.
Todo parece funcionar muy bien, hasta que mi ~/src/Main.js necesita importar otros archivos JS externos. Entonces, las cosas ya no parecen funcionar.
~/docs/index.html :
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <base href="../" target="_blank"> <!-- JavaScript imports --> <script type="module" src="src/Main.js"></script> </head> <body> <main> <div> <textarea id="input" oninput="update()" placeholder="Type here!" ></textarea> <textarea id="output" readonly>no way</textarea> </div> <!-- Textarea script --> <script> // Updates the textarea function update() { let input = document.getElementById("input"); let output = document.getElementById("output"); output.value = doubleIt(input.value); } </script> </main> </body> </html> ~/src/Main.js :
import "./OtherClass.js"; // THIS LINE BREAKS THINGS export function doubleIt(input) { return input + input; }He visto esta pregunta, pero las soluciones no parecen funcionar para mí. Cualquier ayuda apreciada.
Todo script que utilice la sintaxis de import / export incluida en el DOM debe tener el atributo type="module" .
Si el script en línea usa alguna función de un módulo, entonces también deben importarse primero.
Nota: evite los detectores de eventos en línea como oninput y agregue detectores de eventos a través de JavaScript, ya que con los módulos, la función de update ya no será un valor global.
<script type="module"> import { doubleIt } from "./src/Main.js"; let input = document.getElementById("input"); let output = document.getElementById("output"); function update() { output.value = doubleIt(input.value); } input.addEventListener('input', update) </script>