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.js
Linguagem de código: texto simples ( texto simples )
Primeiro, defina uma função chamada display()
no lib.js
mó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 div
elemento e anexando-o ao body
elemento.
Segundo, carregue o index.js
arquivo no index.html
arquivo:
<!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.js
arquivo no index.js
arquivo, você usa módulos ES6. As etapas a seguir ilustram como fazer isso:
Passo 1 . Exporte a display()
função no lib.js
arquivo usando a export
instruçã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 display
entre chaves após a export
palavra-chave. Isso permite que a display
função seja usada em outros módulos.
Passo 2 . Importe a display
função do lib.js
módulo usando a import
instrução e chame a display()
função para mostrar a Hi
mensagem na página web:
import { display } from './lib.js';
display('Hi');
Linguagem de código: JavaScript ( javascript )
Neste exemplo, colocamos o display
nome 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"
à script
tag no para index.html
instruir o navegador da web a carregar o index.js
arquivo 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.html
navegador da web, verá a Hi
mensagem 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
export
instrução para exportar variáveis, funções e classes. - Use a
import
instruçã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.