Trabalhando com M�dulos no JavaScript

Os m�dulos permitem que blocos de c�digo como funç�es, classes e constantes em arquivos separados possam ser importados quando necess�rio, facilitando o processo de manutenç�o e reusabilidade de um projeto JavaScript.

Antes desse recurso era necess�rio declarar vari�veis globais em arquivos .js que, quando adicionados a mesma p�gina, permitiam que essas vari�veis passassem a fazer parte do mesmo contexto. Com os m�dulos o conte�do de um arquivo pode ser exportado para outro, assim como fazemos com include/require no PHP, por exemplo.

Sintaxe

No arquivo no qual declaramos o recurso que desejamos compartilhar usamos a instruç�o export:

export [o-que-queremos-compartilhar]

Agora, no arquivo em que desejamos utilizar o recurso compartilhado usamos a instruç�o import:

import [o-que-queremos-importar] from [nome-do-modulo]

Como utilizar?

Para entender melhor, considere como exemplo uma calculadora simples, onde criamos dois arquivos. O primeiro, util.mjs armazena e exporta algumas funç�es que podem ser re-utilizadas em diversos locais do projeto e tem o seguinte conte�do:

/**
 * resultado aproximado de uma circunfer�ncia de di�metro igual a 20.000
 * 
 * @type 
 */
export const PI = Math.PI // 3.141592653589793

/**
 * recebe por par�metro uma quantidade indefinida de n�meros e efetua a soma dos
 * mesmos.
 *
 * @param {number[]} params
 * @returns  valor soma dos par�metros
 */
export function soma (...params) {
 return params.reduce((a, b) => a + b, 0)
}

Perceba no c�digo acima o uso da palavra export precedendo a constante PI e a funç�o soma. Isso significa que ambos os itens podem ser acessados de fora de seus escopos (arquivo), desde que tenham sido importados.

Para fazer a importaç�o utilizamos o segundo arquivo da nossa calculadora, o index.mjs, que � o ponto de partida da nossa aplicaç�o. Vamos importar do arquivo util.mjs a funç�o soma assim como vemos no c�digo abaixo:

import { soma } from './util.mjs'
console.log(soma(10, 20, 30)) // 60

Na linha 1 utilizamos a palavra reservada import, e em chaves o nome da funç�o que ser� importada, no caso, soma. Por fim, � utilizada a palavra from onde informamos o nome do pacote (no caso do Node.js) ou do arquivo.

� importante lembrar que todas as funç�es, classes, constantes, etc. s�o importados como constantes.

Arquivos mjs s�o arquivos JavaScript com suporte a m�dulos, ou seja, facilitam a distinç�o entre arquivos tradicionais e com suporte a m�dulos.

Quais as variaç�es da sintaxe do import?

Existem algumas variaç�es na sintaxe dos m�dulos, veremos em pequenos exemplos como s�o estas variaç�es.

1. Importando o conte�do default

Podemos definir um item do m�dulo como default, ou seja, quando utilizarmos o import sem utilizar chaves estaremos recuperando este item, por exemplo:

import default const soma = (...params) => params.reduce((a, b) => a + b, 0)

Perceba que neste exemplo utilizamos o prefixo default ap�s a palavra import, significando que este item � o padr�o do pacote. � importante lembrar que apenas um �nico item pode ser exportado como default.

Abaixo vemos como acessar um item definido como default:

import sum from 'pacote'

Perceba que a palavra sum n�o est� entre chaves. Al�m disso, � poss�vel definir qualquer nome para o item porque como default ele n�o � exportado com um nome.

2. importando um �nico item

No exemplo a seguir importamos um �nico item do escopo de outro arquivo. Perceba que dentro das chaves � definido apenas o nome da funç�o que ser� utilizada:

import { soma } from './util.mjs'

3. importando v�rios itens

Podemos tamb�m importar uma quantidade indefinida de itens com o import. Para isso basta utilizar chaves e o nome dos itens separados por virgula, como vemos abaixo:

import { soma, PI } from './util.mjs'

4. importando o default e outros itens

Podemos importar junto com o default os itens nomeados que exportamos. Para isso basta fazer como no exemplo abaixo:

import sum, { soma, PI } from './util.mjs'

5. definindo um ali�s para um item

� poss�vel definir um apelido para um item importado, o que podemos ver melhor no exemplo abaixo:

import { soma as somaDeTodosOsValores } from './util.mjs'

� importante lembrar que esta sintaxe s� funciona nos itens entre as chaves, como no exemplo, soma e PI.

6. importando apenas o arquivo.

Podemos tamb�m importar de um arquivo JavaScript sem trazer nenhum item de seu escopo. Essa pr�tica � comum quando precisamos que um script seja executado sem poluir o escopo atual, funcionando como se estivesse sendo executado em segundo plano:

import './outroScript.js'

7. importando todos os itens de um pacote

� comum a necessidade de importar todos os itens em um pacote. Para isso os m�dulos contam com a seguinte sintaxe:

import * as utils from './util.mjs'
console.log(utils) // { soma, PI }

� importante lembrar que neste tipo de importaç�o o default n�o � retornado junto com o resto do pacote.

Como testar os m�dulos no navegador?

Para utilizar na maioria dos navegadores web, basta criar um arquivo HTML e um outro com formato .mjs. Isso significa que � um arquivo JavaScript e suporta os m�dulos. Em seguida, no JavaScript crie uma tag script, lembrando de informar o nome do seu arquivo mjs no src e o type como module, como podemos ver abaixo:

<script type="module" src="index.mjs"></script>

A partir deste momento, enquanto estiver em um navegador que d� suporte ao recurso ser� poss�vel utilizar a sintaxe de m�dulos.

Compatibilidade

Engine	Vers�o Minima
Node.JS ( V8)	8.5.0
Safari ( WebKit)	11.4
Chrome ( V8)	68
Microsoft Edge ( ChakraCore)	17
Firefox ( Gecko)	61

No Node.js os m�dulos ainda est�o em est�gio experimental.

Nota: O Opera atualmente � um fork do Google Chrome e, por isso, o mesmo foi desconsiderado da lista. Caso voc� o utilize, verifique na documentaç�o do mesmo se a vers�o atual possui suporte ao recurso mencionado aqui. � importante lembrar a vers�o atual do Chrome n�o equivale a �ltima vers�o do Opera.

Saiba mais Veja a S�rie O JavaScript est� dominando o mundo?