Projeto em JS | JavaScript | Alura - Cursos online de tecnologia

Projeto em JS

Boa tarde pessoal,

Eu decidi deixar o html dentro do javascript e ficou dessa forma:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Alura MIDI</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="stylesheet">

    <link rel="icon" type="image/png" href="images/bateria.png">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/estilos.css">

    <script src="./js/addElement.js"></script>
    <script src="./js/appendElement.js"></script>
    <script src="./js/convertToArray.js"></script>
    <script src="./js/createAudios.js"></script>
    <script src="./js/createButtons.js"></script>
    <script src="./js/executeAudio.js"></script>
    <script src="./js/generateListButtons.js"></script>
    <script src="./js/getElementCreated.js"></script>
    <script src="./js/initContent.js"></script>
    <script src="./js/positionButton.js"></script>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

Eu tentei importar cada um dos arquivos js dentro do main.js e não tive sucesso. Eu queria saber se alguém conhece alguma forma de importar esses arquivos dentro de um main ao invés de ficar criando várias tags script.

Olá João, tudo bem?

Desculpe a demora em retornar.

Sobre a sua dúvida, existe sim uma forma de importar arquivos JS dentro de um main.js. Você pode utilizar o recurso de módulos do JavaScript, que permite a importação e exportação de funções e variáveis entre arquivos.

Para utilizar esse recurso, é necessário que você adicione o atributo "type" na tag script que importa o main.js, da seguinte forma:

<script type="module" src="main.js"></script>

E dentro do main.js, você pode utilizar a sintaxe "import" para importar os outros arquivos JS, da seguinte forma:

import { nomeDaFuncao } from './nomeDoArquivo.js'

Lembrando que o caminho do arquivo deve ser relativo ao main.js.

Um abraço e bons estudos.