Módulos JavaScript ES6: import, export e import dinâmico

Neste capítulo vamos ver os módulos e as importações/exportações em JavaScript. Vais perceber como usar estas ferramentas para organizar e partilhar o teu código de forma mais eficaz, e como importar e exportar dados entre ficheiros diferentes sem riscos. Tudo com exemplos concretos e práticos.

Os módulos e as importações/exportações fazem parte da especificação ECMAScript 6 (ES6), introduzida em 2015. Todos os navegadores atuais os suportam nativamente: um transpilador como o Babel ou um bundler como o Webpack só serve já para visar navegadores muito antigos, ou para agrupar os ficheiros.

O que é um módulo em JavaScript (ES6)?

Os módulos são uma forma de estruturar e organizar o código, dividindo-o por vários ficheiros independentes. Isso torna o código mais fácil de compreender e de manter a longo prazo: ganha-se legibilidade e as várias partes do código passam a ser reutilizáveis.

Princípio dos módulos e vantagens

O princípio dos módulos assenta na instrução «export», que torna certas partes do código acessíveis a partir do exterior do módulo. Assim escondes as partes de que o utilizador final não precisa e exportas apenas os elementos pertinentes.

As vantagens são muitas. Primeiro, isolar as diferentes partes do código evita os conflitos de nomes, o que é particularmente útil quando se trabalha em equipa num projeto de grande dimensão. Depois, o código fica mais bem organizado, repartido por ficheiros mais fáceis de manter. Por fim, esse código reutiliza-se sem esforço, bastando importá-lo noutros projetos.

Criar um módulo com a instrução «export»

Para criar um módulo em JavaScript basta usar a instrução «export» à frente dos elementos que queres tornar acessíveis a partir do exterior do módulo. Por exemplo, para exportar uma função «saluer» definida num ficheiro module.js:

export function saluer() {
  console.log("Bonjour !");
}

Também podes exportar vários elementos de um módulo, escrevendo a instrução «export» à frente de cada um deles. Por exemplo:

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

A instrução «export default» serve para designar o elemento por omissão do teu módulo: se não importares explicitamente um elemento, é esse que será importado no seu lugar. Por exemplo:

export default function maFonctionParDefaut() {
  console.log('Je suis la fonction par défaut');
}

Como importar um módulo em JavaScript (ES6)?

A gestão dos módulos em JavaScript permite separar o código por vários ficheiros e organizar o projeto de forma mais eficaz. Vimos no ponto anterior como exportar um módulo em JavaScript com a instrução export. Falta saber como importar um módulo no teu código: é o que esta secção mostra.

Usar a instrução «import»

Para importar um módulo em JavaScript usamos a instrução import. Aqui está um exemplo:

import * as monModule from '/chemin/vers/mon/module';

Esta sintaxe importa todos os elementos do módulo monModule e guarda-os num objeto com o mesmo nome. Também podes indicar quais os elementos que queres importar, escrevendo a instrução import seguida da lista desses elementos entre chavetas:

import { maFonction, maVariable } from '/chemin/vers/mon/module';

Também podes importar elementos nomeados de um módulo com a instrução «import» seguida da sintaxe «{ nom1 as alias1, nom2 as alias2 }», assim:

import { nom1 as alias1, nom2 as alias2 } from 'module';

Para importar uma classe ou uma função que está em export default assim:

export

export default class MonModule {
  constructor() {
    console.log('Je suis une classe');
  }
}

import MonModule from 'module';

Quando usas a importação por omissão e a importação nomeada no mesmo módulo, convém pôr a importação por omissão em primeiro lugar, assim:

import MonModule, { maFonction } from './monModule';

// utilização da importação por omissão
const monModule = new MonModule();

// utilização da importação nomeada
maFonction();

Por fim, existe a importação dinâmica com o método «import()», que carrega um módulo de forma assíncrona. É útil quando só queres carregar um módulo no momento em que ele é preciso, para não sobrecarregar o browser sem necessidade.

import('./monModule').then(monModule => {
  // utilização dos elementos importados
  monModule.maFonction();
  monModule.maVariable;
});

Como usar módulos no browser?

Já vimos como criar e exportar módulos com a instrução «export» e como importá-los com a instrução «import». Só que estas instruções ainda não são suportadas por todos os browsers. Para usar módulos num browser há várias soluções, apresentadas nesta secção.

Usar o atributo «type=module» nas tags «script»

Para usar módulos no browser tens de indicar o atributo «type=module» na tag «script» do teu ficheiro JavaScript. É assim que o browser sabe que o ficheiro é um módulo e que deve tratá-lo de forma diferente de um script normal. Aqui está um exemplo de código:

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

module.js

export const maVariable = 'ma variable';
export function maFonction() {
  console.log('Je suis une fonction');
}
export class MaClasse {
  constructor() {
    console.log('Je suis une classe');
  }
}

script.js

import { maVariable, maFonction, MaClasse } from './module.js';

console.log(maVariable); // Mostra 'ma variable'

Usar bundlers como o Webpack

Outra forma de carregar módulos no browser é usar um bundler, uma ferramenta que junta vários módulos e ficheiros JavaScript num único ficheiro, mais fácil de carregar pelo browser. O Webpack é um bundler popular, com muitas funcionalidades avançadas para a gestão dos módulos. Se quiseres aprender a usar o Webpack, escrevi um tutorial sobre o assunto.

Conclusão

Vimos como criar um módulo com a instrução «export» e como importar um módulo com a instrução «import». Vimos também como tratar os caminhos e o ambiente na importação de módulos, e o uso das importações/exportações por omissão e nomeadas. Por fim, vimos como usar módulos no browser com o atributo «type=module» nas tags «script».

Este tutorial deu-te as bases para começar a programar em JavaScript e para compreender os conceitos-chave da linguagem. A partir daqui podes continuar a aprender e especializar-te em várias áreas, como o desenvolvimento web. Bom trabalho e boa sorte para os teus próximos projetos!