Módulos do JavaScript
Módulos (Modules)
Os módulos JavaScript permitem que você decomponha o código em arquivos separados.
Isso tornará mais fácil a manutenção da biblioteca de código. Os módulos são usados import
Os módulos também dependem de declarações no <script> tag para importar de arquivos externos. type="module".
Exemplo
<script type="module"> import message from "./message.js"; </script>
Exportação
comFunçõesouVariáveisOs módulos podem ser armazenados em qualquer arquivo externo.
Existem dois tipos de exportação:Exportação NomeadaeExportação Padrão.
Exportação Nomeada (Named Exports)
Vamos criar um arquivo chamado person.js e preenchê-lo com o conteúdo que queremos exportar.
Você pode criar exportações nomeadas de duas maneiras. Uma é criar internamente uma a uma, e a outra é criar todas de uma vez no final do arquivo.
Criação interna por parte:
person.js
export const name = "Bill"; export const age = 19;
Criação em uma vez no final do arquivo:
person.js
const name = "Bill";
const age = 19;
export {name, age};
Exportação Padrão (Default Exports)
Vamos criar outro arquivo chamado message.js e usá-lo para demonstrar a exportação padrão.
Apenas um exportação padrão pode existir em um arquivo.
Exemplo
message.js
const message = () => {
const name = "Bill";
const age = 19;
return name + ' é ' + age + ' anos de idade.';
};
export default message;
Importação
Você pode importar módulos para um arquivo de duas maneiras, dependendo se eles são exportações nomeadas ou padrão.
Exportação nomeada é construída usando chaves. A exportação padrão não é.
Importação de exportação nomeada
Importação de exportação nomeada do arquivo person.js:
import { name, age } from "./person.js";
Importação de exportação padrão
Importação de exportação padrão do arquivo message.js:
import message from "./message.js";
Atenção
Módulos são aplicáveis apenas ao protocolo HTTP(s).
Páginas abertas através do protocolo file:// não podem usar importação/exportação.
