Si importo algo, luego lo uso, no funcionará en una función o sin una función para js externo pero con js en línea
por ejemplo
<html> <body> <button onclick="foo()">Click Me</button> </body> <script type="module"> import confetti from 'https://cdn.skypack.dev/canvas-confetti'; confetti() </script> </html>obras
pero
<html> <body> <button onclick="foo()">Click Me</button> </body> <script type="module"> import confetti from 'https://cdn.skypack.dev/canvas-confetti'; function foo(){ confetti() } </script> </html>y
<html> <body> <button onclick="foo()">Click Me</button> </body> <script type="module" src="script.js"></script> </html>secuencia de comandos.js:
import confetti from 'https://cdn.skypack.dev/canvas-confetti'; function foo() { confetti() }o script.js:
import confetti from 'https://cdn.skypack.dev/canvas-confetti'; confetti()no trabajo
Deje de usar detectores de eventos en línea, que requieren variables globales y, por lo tanto, anula el propósito de los módulos.
En su lugar, use JavaScript para agregar el oyente:
<button id="foo">Click Me</button> <script type="module"> import confetti from 'https://cdn.skypack.dev/canvas-confetti'; document.getElementById('foo').addEventListener('click', confetti); </script>el problema es definir el tipo de script como module , el módulo de tipo significa que desea importar otro módulo en este script. por lo tanto, las variables y la función dentro del script del module de tipo no son accesibles fuera del alcance de la ejecución.
la solución es asignar la función al alcance de la window scope global:
<script type="module"> import confetti from "https://cdn.skypack.dev/canvas-confetti"; window.foo = function () { confetti(); }; </script>aquí hay una demostración en vivo