Introdução aos Módulos em JavaScript

Os módulos permitem organizar funcionalidades em blocos separados, que podem ser utilizados em outras aplicações.

Diferenças entre módulos e scripts comuns:

A política CORS é aplicada para carregar módulos. Isso significa que não podemos simplesmente carregar uma página HTML que inclua um módulo no navegador. O módulo é carregado usando o protocolo HTTP/HTTPS. Ou seja, a página HTML que carrega o módulo deve estar hospedada em algum servidor web.
Módulos são sempre executados em strict mode.
Por padrão, módulos são carregados de forma assíncrona
Módulos são carregados e executados apenas uma vez.
Módulos permitem o uso de expressões await no nível superior sem a necessidade de definir e chamar uma função assíncrona.
Módulos podem importar funcionalidades de outros módulos e, por sua vez, exportar suas funcionalidades para outros módulos.
Módulos são executados em seu próprio escopo, e não no contexto global. Isso significa que variáveis, constantes, funções, classes, etc., definidas dentro de um módulo, não estão acessíveis fora dele até que sejam explicitamente exportadas. Para que outro módulo possa utilizá-las, ele deve importá-las.

Se um arquivo contém expressões import ou export, ele é considerado um módulo. Assim, para transformar um script comum em um módulo, basta adicionar ao arquivo:

export {};

Definindo um Módulo: Exportação

Vamos definir um módulo simples. Para isso, criaremos um arquivo message.js no qual definiremos o seguinte código:

export function sayHello() {
  console.log("Hello Programício!");
}

Aqui, definimos a função comum sayHello(), que exibe uma mensagem no console. No entanto, ela é definida com a palavra-chave export, o que significa que este arquivo é um módulo e a função sayHello() pode ser importada por outros módulos.

Conectando um Módulo: Importação

Agora, vamos conectar essa função em outro arquivo. Para isso, usaremos o arquivo main.js:

import { sayHello } from "./message.js";
sayHello();

Para importar funcionalidades de outro módulo, usamos a palavra-chave import, seguida pelos nomes dos componentes a serem importados. Todos os componentes importados do módulo são colocados entre chaves: import { sayHello }. Neste caso, estamos importando a função sayHello.

Depois do operador from, especificamos o módulo de onde a importação será feita. Neste caso, especificamos ./message.js, assumindo que ambos os módulos - main.js e message.js - estarão na mesma pasta.

Carregando Módulos

Para carregar módulos, definimos uma página web index.html na pasta com os arquivos compilados:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script type="module" src="main.js"></script>
  </body>
</html>

Para carregar o módulo principal da aplicação - main.js - usamos o elemento <script>, onde o atributo type="module" é definido.

O carregamento dos módulos é realizado via AJAX, portanto, os módulos compilados devem estar hospedados em um servidor web. Isso significa que não podemos simplesmente abrir a página no navegador e carregar os módulos. A página web deve estar hospedada em um servidor. O servidor web pode ser qualquer um. Neste exemplo, usaremos a opção mais simples: Node.js. No entanto, em vez de Node.js, pode ser usada qualquer outra tecnologia de servidor como PHP, ASP.NET, Python, etc., ou um servidor web específico como Apache ou IIS.

Vamos criar um arquivo de servidor na pasta com os arquivos dos módulos. Vamos chamá-lo de server.js, com o seguinte código:

const http = require("http");
const fs = require("fs");

http
  .createServer(function (request, response) {
    // obtém o caminho após a barra
    let filePath = request.url.substring(1);
    if (filePath === "") filePath = "index.html";
    fs.readFile(filePath, function (error, data) {
      if (error) {
        response.statusCode = 404;
        response.end("Recurso não encontrado!");
      } else {
        if (filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");
        response.end(data);
      }
    });
  })
  .listen(3000, function () {
    console.log("Servidor iniciado na porta 3000");
  });

Este é um servidor bem simples que serve arquivos estáticos aos usuários. Para criar o servidor, usamos a função http.createServer(), e para ler e enviar arquivos, usamos a função fs.readFile(). Se o nome do arquivo não for especificado, o arquivo index.html será enviado. O servidor será executado no endereço http://localhost:3000/.

Vale destacar que, ao enviar módulos JavaScript, precisamos definir o tipo MIME do conteúdo enviado como "text/javascript":

if (filePath.endsWith(".js")) response.setHeader("Content-Type", "text/javascript");

Definição de módulos JavaScript

Agora, iniciamos o servidor com o comando:

node server.js

http://localhost:3000

Após iniciar o servidor, podemos acessar o endereço http://localhost:3000 no navegador. A página será exibida e no console do navegador veremos o resultado da execução do módulo main.js.

Carregamento e execução de módulos em JavaScript e Node.js