Estou tentando trabalhar com módulos no JavaScript e me deparei com um problema ao chamar uma função que está no arquivo main.js
pelo index.html
.
<!doctype html>
<html lang="en">
<head>
<title>ES modules</title>
<script type="module" src="./main.js"></script>
</head>
<body>
<script>
fnFuncionou()
</script>
</body>
</html>
Esse main.js
importa uma variável de texto de outro arquivo, o mods.js
.
import texto from './mod.js'
console.log(`Fora da função ${texto}`)
function fnFuncionou() {
console.log(`Dentro da função ${texto}`)
}
Abaixo o código do mods.js
:
let texto = "funcionou!"
export default texto
Ao executar o index.html
, recebo a mensagem do console.log(
Fora da função ${texto})
, que está fora da função no main.js
. Porém, a função fnFuncionou()
não é chamada, dando a seguinte mensagem de erro:
index.html:10 Uncaught ReferenceError: fnFuncionou is not defined
Alguém saberia me dizer o porquê disso acontecer? É possível chamar esta função fnFuncionou()
sem alterar a estrutura de arquivos da pasta? Eu resumi o problema, pois os arquivos que estou trabalhando tem bem mais códigos.