Resumo : neste tutorial, você aprenderá sobre os módulos ES6 e como exportar variáveis, funções e classes de um módulo e reutilizá-las em outros módulos.
Introdução aos módulos ES6
No início, o JavaScript inicialmente servia pequenas tarefas de script que forneciam interatividade às páginas da web. Hoje em dia, o JavaScript evoluiu para potencializar aplicações completas em navegadores e servidores (Node.js).
Para lidar com esse crescimento, é necessário modularizar o código JavaScript em módulos e torná-los reutilizáveis entre aplicativos.
ES6 introduziu o conceito de módulos. Um módulo é um arquivo JavaScript executado em modo estrito . Isso significa que quaisquer variáveis ou funções declaradas no módulo não serão adicionadas automaticamente ao escopo global .
A boa notícia é que os navegadores modernos e o Node.js suportam módulos ES6 nativos. Este suporte nativo agiliza o carregamento do módulo e otimiza o desempenho.
Os módulos ES6 são suportados no Node. js versões 13 e superiores.
Exemplo de módulos ES6
Criaremos um novo projeto com a seguinte estrutura de diretórios e arquivos:
├── index.html
└── js
├── index.js
└── lib.jsLinguagem de código: texto simples ( texto simples )Primeiro, defina uma função chamada display()no lib.jsmódulo:
function display(message) {
const el = document.createElement('div');
el.innerText = message;
document.body.appendChild(el);
}Linguagem de código: JavaScript ( javascript )A display()função exibe uma mensagem na página da web criando um divelemento e anexando-o ao bodyelemento.
Segundo, carregue o index.jsarquivo no index.htmlarquivo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Modules</title>
</head>
<body>
<script src="js/index.js"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Para usar a display()função do lib.jsarquivo no index.jsarquivo, você usa módulos ES6. As etapas a seguir ilustram como fazer isso:
Passo 1 . Exporte a display()função no lib.jsarquivo usando a exportinstrução:
function display(message) {
const el = document.createElement('div');
el.innerText = message;
document.body.appendChild(el);
}
export { display };Linguagem de código: JavaScript ( javascript )Neste exemplo, colocamos o nome da função displayentre chaves após a exportpalavra-chave. Isso permite que a displayfunção seja usada em outros módulos.
Passo 2 . Importe a displayfunção do lib.jsmódulo usando a importinstrução e chame a display()função para mostrar a Himensagem na página web:
import { display } from './lib.js';
display('Hi');Linguagem de código: JavaScript ( javascript )Neste exemplo, colocamos o displaynome da função que queremos importar entre chaves e especificamos o nome do módulo do qual queremos importar ( lib.js).
Etapa 3. Adicione type="module"à scripttag no para index.htmlinstruir o navegador da web a carregar o index.jsarquivo como um módulo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Modules</title>
</head>
<body>
<script src="js/index.js" type="module"></script>
</body>
</html>Linguagem de código: HTML, XML ( xml )Se você abrir no index.htmlnavegador da web, verá a Himensagem na página da web.
Resumo
- Os módulos ES6 permitem organizar arquivos JavaScript em módulos.
- Módulos ES são arquivos JavaScript executados em modo estrito.
- Use a
exportinstrução para exportar variáveis, funções e classes. - Use a
importinstrução para importar variáveis, funções e classes de outros módulos. - Use
type="module"na tag de script para instruir o navegador da web a carregar um arquivo JavaScript como um módulo.
