Compreendendo módulos JavaScript/ES | Stephan Haewß | Skillshare
Pesquisar

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Compreendendo módulos JavaScript/ES

teacher avatar Stephan Haewß

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      1:12

    • 2.

      Importação e exportação

      25:03

    • 3.

      Importação dinâmica

      16:51

    • 4.

      Conclusão

      2:05

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

28

Estudantes

--

Projeto

Sobre este curso

Neste curso, eu introduzo a funcionalidade dos módulos ECMAScript/JavaScript. Com sua ajuda, você pode estruturar seus aplicativos JavaScript para torná-los sustentáveis e fáceis de estendê-los. O curso vai para as várias maneiras de importar módulos ou funções/variáveis exportadas individuais usando a palavra-chave de importação e também mostra como criar módulos usando a palavra-chave de exportação.

Conheça seu professor

Teacher Profile Image

Stephan Haewß

Professor
Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: Olá e bem-vindo aos módulos do meu curso ES6, como usá-los e como criá-los. Os módulos Es6 são o novo padrão para carregar módulos em JavaScript, que é suportado em todos os navegadores modernos. Ele tem uma nova sintaxe e palavras-chave extras para importação e exportação. Quase todos os navegadores modernos podem usá-lo. Eles têm carregadores de módulo integrados e também nenhum jazz em sua versão mais recente o suporta. Então, todos os transpiladores e empacotadores modernos e também TypeScript o suportam. Novos projetos começando usam o novo sistema de módulos e mais e mais projetos existentes são atualizados para apoiá-lo. E também ajuda a agitar as árvores e minimizar os tamanhos dos pacotes. Então, se você estiver usando módulos ES6, você está no caminho certo para desenvolver aplicativos da web modernos e de fácil manutenção. Portanto, neste curso, você aprenderá como usar as instruções Export e import e como integrar módulos em sua página HTML, como usar importações dinâmicas e como usar a sintaxe. Espero que você goste do curso e veja você no primeiro vídeo. 2. Importação e exportação: Olá e bem-vindo a este vídeo. Vou explicar neste vídeo como usar os módulos ES6, como inseri-los, como criá-los e como integrá-los ao seu HTML. Primeiro, vamos falar sobre o meu ambiente de desenvolvimento em breve . Tenho vídeos para recodificar como um IDE. Você também pode usar isso. É uma ótima ideia da Microsoft. É grátis. Você pode baixá-lo para minhas meninas, para Windows, para Linux. Mas você também pode usar outra coisa. Você pode usar seu editor de texto favorito, seja o que for. Realmente não importa. E eu estou usando um VGS como um servidor surdo, que está transmitindo código em tempo real. Mas você não precisa usá-lo. Você pode usar qualquer outra coisa. Você pode usar um servidor normal, você pode usar um webpack, servidor de desenvolvimento, o que quiser. Então, vamos começar. E cada página da Web e cada aplicativo de representante começa em HTML, neste caso, index.html. E aqui está. É bem simples. Ele tem a guia título VII porque estou usando criar VT para criar um projeto. Então eu tenho essa div aqui, que contém apenas pequenos textos. Então isso não importa. Mas aqui temos a primeira etiqueta importante. É a tag de script, é claro , porque está carregando um script. Nesse caso, é o JS principal dos molhos, que está aqui. Nós verificamos agora mesmo. JS principal, no momento está vazio, mas vou colocar algum código lá. Então você também pode colocar algum código aqui dentro da tag de script e , em seguida, omitir a fonte. Também é possível que você já saiba que é uma tag de script normal. Funciona como uma tag de script normal. A única diferença é que você tem módulo de tipo aqui. E isso é importante se você quiser usar palavras-chave são declarações como importar e exportar. No script, você precisa usar o módulo de tipo aqui. Também há outra possibilidade. Faça importações dinâmicas. Você pode usar a função de importação e importar módulos, módulos ES6 com isso. Mas a maneira padrão de referenciá-los estaticamente é a tag de script e o módulo de tipo. Então isso é o importante, digite módulo. E você pode escrever seu código aqui dentro, ou você pode usar o atributo source e apontar para o seu JavaScript. Então, vamos verificar se isso está realmente carregado. Então eu coloquei um ano algum log, apenas JS principal, e vamos verificar a saída do console. Ok, então aqui está. Isso realmente funciona. Então nosso script, nosso módulo, está carregado. E, no momento, não é visível que seja um módulo. Mas vamos colocar alguns módulos de código específico aqui. Então, no momento em que tivermos esse registro, podemos deixá-lo aqui. Mas o que é importante no módulo? É que o módulo pode exportar algo ou você pode importar algo ou ambos. Claro, estou fazendo aqui a importação primeiro, é claro, porque exportar aqui não faz nenhum sentido. Porque estou carregando isso por meio da tag de script aqui. E eu não posso usar nenhuma exportação aqui. Então, temos que usar primeiro alguma importação. Então, estou colocando uma declaração de importação aqui. Essa é a novidade. Esta é a declaração de importação do módulo ES6. E agora temos que escrever algo para importar. E depois disso de e você pode ler isso como importar algo que especificamos mais tarde do arquivo, que é especificado aqui, que é eu criei o mod um. Então é mod one dot js. Use a extensão aqui. Eu também poderia omitir a extensão aqui, mas isso é porque estou usando o VHS como servidor surdo e ele pode resolver também os módulos sem nenhuma extensão. Mas acho que é uma prática recomendada colocar a extensão aqui. Portanto, também pode ser algo como JSX ou você também pode, se o seu ambiente suportar, você também pode usar, você também pode importar CSS. Mas para isso você precisa de algum tipo de empacotador, ou neste caso, as mortes do jazz também suportam a importação de CSS. Mas normalmente você importa um arquivo js dot js. Então, estamos importando desse arquivo. E aqui precisamos dizer ao mecanismo JavaScript o que importar. Podemos importar coisas diferentes. Podemos importar exportações específicas, exportações únicas. Ou podemos importar um padrão, uma exportação padrão, ou podemos importar o módulo completo, que estou fazendo aqui com este asterisco. E então eu preciso colocar algum identificador para eles. Eu posso inventar isso completamente. Então, eu estou usando o mod one. Realmente não importa qual é o identificador. Posso referenciar o módulo com esse identificador. Então eu posso escrever aqui mod one dot something. Está vazio no momento, então não tenho nada aqui. Então, eu estou apenas escrevendo o mod um. Mas o importante aqui é o asterisco. Como mod one significa que estou importando o módulo completo como um objeto, e estou nomeando-o mod um. Então esse é o meu identificador para o módulo, o módulo completo. Vamos para o módulo mod one. No momento está completamente vazio, então não há nada a ser importado na verdade, mas colocamos algo aqui. Estamos importando algo. Portanto, devo exportar algo neste módulo. E é aqui que usamos a palavra-chave export. E depois da exportação, precisamos especificar o que queremos exportar. E eu estou exportando uma função aqui. E eu não posso, não posso exportar e função anônima, devo nomeá-la aqui. Então, nós o nomeamos, fazemos porque ele está apenas fazendo algo, algo como esse log do console. Estou apenas registrando. Faça isso. Ok, então aqui estamos exportando essa função no JS principal. Posso importar isso e estou inserindo o módulo completo. Então eu deveria ser capaz de fazer algo como mod one dot, fazê-lo e chamá-lo aqui. Vamos verificar se está funcionando. Olá módulos, essa é a nossa div, não importa. O importante está aqui no console. Vamos fazer isso. Isso é o que nós, o que registramos, na função export at para ele. E então temos js principais. Vamos verificar novamente o código. Sim, então estamos chamando a função de exportação, faça isso. E nesta função estamos fazendo o log do console. E depois disso, fazemos o log do console JS principal. Então isso já funcionou. Então está tudo bem. Vamos exportar a segunda função. Então, copiamos este e o nomeamos, fazemos também. Nós trancamos no console. Ok, então o que devemos fazer aqui, o que devemos ser capazes de fazer aqui é fazê-lo. Faça isso também a partir do módulo mod one. E já está sugerindo que eu faça também. E vamos ver se funciona. Faça isso, faça isso também. Funciona. Ok, então nós o exportamos para funções aqui. Função de exportação, faça isso. A função de exportação devido à sintaxe é direta. Você acabou de colocar a instrução export antes da função aqui. E você também pode exportar variáveis como liger, const, por exemplo. Isso é uma constante. Estou exportando isso aqui. Mod um ponto. Isso é uma constante. E eu posso apenas fazer login no console aqui. E vamos verificar se está funcionando. Sim, então está saindo para aqui. Então isso funciona. Podemos exportar funções, podemos exportar variáveis. Então, vamos ver se podemos importar uma função específica ou exportação específica. Então, aqui também temos a sintaxe. Importe o módulo completo e faça referência a ele como este identificador mod one. Eu poderia renomear o mod um para apenas mod, por exemplo, posso chamá-lo de qualquer coisa parecida. Mas agora, se eu quiser importar uma exportação específica, preciso usar uma sintaxe diferente. A sintaxe aqui são as chaves, que também são usadas para estruturação e que são semelhantes. Então, estou colocando aqui essas chaves encaracoladas e estou recebendo essas exportações aqui como sugestões para importação. Então eu tenho que fazer é, e isso é uma constante como as exportações deste módulo mod one dot js. Vamos importar, faça isso. E estamos comentando isso no momento. E agora eu importei fazer isso. Então eu preciso remover isso porque eu só tenho que fazer isso agora como um identificador. E eu posso chamar de fazer isso como uma função porque é exportado aqui no mod um. E eu estou importando apenas esta, exportar, essa função aqui. E é chamado da mesma forma que é exportado aqui, faça isso. E eu estou chamando isso. Então, vamos ver. Agora está funcionando. Eu poderia fazer o mesmo devido a uma atriz que todos os kowtow também poderiam importar o const. Então, no momento, estou importando completamente todas as exportações aqui separadamente. Eu poderia chamar do it para um log do console de ícones. Isso é uma constante. E devemos ter a mesma saída de antes. É devido 22. Até agora tudo bem. Assim, podemos importar o módulo completo. Você pode importar exportações únicas ou importá-las separadamente aqui, como eu fiz aqui. E se você quiser chamá-lo? Digamos que você já tenha uma função que é chamada para fazer isso. Você não quer mudar o nome porque você quer usá-lo aqui. E este aqui está apenas fazendo o log do console. E nós produziremos Local. Faça isso. Então agora temos um problema porque estamos definindo aqui essa função, faça isso, e é o mesmo identificador dessa importação. Mas como podemos importar isso e renomeá-lo para um identificador diferente? Isso é possível com a mesma sintaxe que fizemos antes com a estrela. Como fazer isso, como, digamos, importado. Faça isso. Com essa sintaxe. Renomeamos a exportação para esse identificador importado, faça isso. Vamos ver se podemos alterar este para importá-lo, fazê-lo e ver qual é a saída. Então, vamos fazer isso. Faça isso com dois e cara local. Isso é o que esperávamos agora. Porque aqui, isso é, claro, essa declaração de função. Isso faz isso e os exportados fazem isso a partir deste módulo. Nós o renomeamos para importá-lo para ele. E você pode fazer o mesmo ano, se quiser, fazer isso para importar. Então, se você já tem e identifica no escopo do seu módulo que é idêntico a uma exportação de um módulo. Você pode usar essa sintaxe para renomear a importação. Vamos verificar se ainda está funcionando. Sim, está funcionando. Portanto, é assim que você importa as exportações separadamente. E isso é importante porque você também pode, é claro, importar tudo com sempre com uma estrela e um módulo completo importante. Mas é um problema porque você não diz ao empacotador ou ao programa que você usa para empacotar seu JavaScript e minificado e coisas assim. Você não diz a este sistema o que você realmente usa neste módulo. Se você faz isso e só quer ter, digamos que você só queria fazer isso. Então, eu estou comentando isso. Se você só quer ter, faça isso como importante para isso. O empacotador, se ele usa, por exemplo, é algo como três tremores de árvore. O empacotador sabe que você só usa, faça essa função a partir deste módulo. Então, teoricamente, se ninguém mais usa, nenhum outro usuário do módulo faz isso também, ou essa constante, o empacotador poderia simplesmente apagar esse código. E, portanto, diminua o tamanho do pacote. Essa é a vantagem dessa sintaxe: basta importar uma única exportação. Portanto, você deve preferir essa sintaxe. Você também pode, é claro, se você usar o modular completo , quase todas as funções ou as exportações no módulo. Você pode, é claro, usar essa sintaxe. Então, mas se você, digamos que você tenha algo como traço baixo, que contém cerca de 3030 exportações ou algo parecido. E você só precisa de uma função. Seria sensato importar apenas essa função. Porque seu empacotador apagaria todas as outras funções. Você tem um tamanho de pacote muito menor. Então, vou voltar a isso. Agora. Vamos pular direto para sintaxe diferente ou um estilo de importação diferente. Vamos chamá-lo assim. O que também podemos fazer é definir uma exportação padrão, padrão, exportação, padrão após a exportação. E estou dizendo ao sistema de módulos que essa é minha exportação padrão. Claro que sim. O que posso fazer aqui para importar a exportação padrão? Então, digamos que essa seja minha principal função aqui. É aqui que, digamos, 80% dos usuários do módulo desejam usar. Ou talvez seja também a única função. Vamos, vamos fazer assim. É a única função que é a única exportação. Então você pode, você pode dizer que a função padrão de exportação faz isso. E o que você pode fazer aqui é escrever assim. Vamos mudá-lo para fazer isso. E eu vou apagar esse. Vamos verificar no navegador se ele está funcionando. Faça isso. Funciona. Então, se você andar de exportação padrão, você pode importar esse padrão. Dessa forma. Basta escrever import, depois qualquer identificação, eu poderia usar um identificador diferente aqui que eu poderia usar importado. Faça isso. Não importa porque essa sintaxe é para importar a exportação padrão. Então eu posso nomeá-lo como eu quiser. Ainda trabalhando. Não precisa ser o nome de exportação. Então eu poderia chamá-lo de qualquer coisa parecida porque não estou especificando. Não preciso especificar o que quero importar porque essa sintaxe é para importar o padrão. É claro que você precisa ter um padrão no outro módulo. Então, se eu apagar isso, não deve mais funcionar, recebo um erro de sintaxe. O modelo solicitado não fornece uma exportação chamada padrão. Ok? Então não funciona. Obviamente, tenho que marcar a exportação como padrão para importá-la como padrão. Então, aqui você pode colocar alguns, qualquer identificação que você gostaria de importar a exportação padrão aqui. E eu posso ter uma segunda exportação, que não é padrão. É claro que você só pode ter um único padrão. Mas eu posso ter um segundo. Isso não é um problema. Então, como isso importa eu, é claro que posso. Direito de importar declarações. O primeiro é importar o padrão e o segundo é importar. Faça isso também. Isso é completamente possível. Então eu chamo aqui, faça também. E isso também deve funcionar. Acho que não mudei o log do console aqui. Então agora faça isso e faça também. Ok, então é assim que você usa a importação com uma exportação padrão. Você também pode, você também pode combinar isso. Portanto, a sintaxe também é possível. Então, se você quiser importar explicitamente nessas chaves, nessas chaves, você também pode dizer explicitamente, eu quero importar padrão, nomeie como importante fazê-lo. Você deve fornecer um identificador, é claro, porque isso não funciona, porque você precisa de um identificador aqui. Então você pode fazer isso. Então, assim que você colocar um padrão antes da função, você precisará considerar isso aqui e importá-lo como padrão e, em seguida, algum identificador. Ou você pode, é claro, usar a expressão muito mais curta e importá-la assim. Claro que agora é o dobro. Então eu deveria comentar isso, ou eu apenas apago aquele. O padrão é importante para ele. Então, está tudo bem. Vamos verificar isso. Ok, está funcionando. OK. Então é assim que você importa, e é assim que você exporta. E no próximo vídeo falaremos sobre importação dinâmica, que é Sim, é apenas uma função que você pode usar para importar módulos. E você pode usá-lo para atrasar o carregamento de um módulo, por exemplo. Esse será o próximo vídeo e espero ver você lá. Tchau. 3. Importação dinâmica: Olá, Bem-vindo a este vídeo. Aqui, explicaremos como usar importações dinâmicas. Então, digamos que queremos carregar um módulo, mas não no início do tempo de carregamento sobre a página. Mas queremos carregá-lo mais tarde. Talvez em qualquer lugar do componente da interface do usuário, que é bastante grande, tantas dependências. Portanto, não queremos carregá-lo no início. No início do carregamento da página. Queremos atrasar o carregamento do módulo. Para um momento posterior. O usuário navega, por exemplo, para uma nova página. Neste momento, o módulo será carregado e não no início. Podemos simular isso. Como não temos interação do usuário aqui em nossa página da web no momento, podemos simular isso usando um setTimeout com o atraso de 1 segundo. E aqui podemos tentar carregar o módulo. Vamos ser ingênuos e tentar isso. Basta apagar isso aqui. Não precisamos mais disso. Basta colocar a instrução import aqui nesta função. Então isso não funciona. Já está marcado como um erro. Tentamos mesmo assim. E veja o que o navegador diz. Erro de sintaxe não detectado, inspecione token inesperado. Ok? Então esta é a mensagem de erro que não é bem, não é bem explicativa, mas vou explicá-la. Essa é a declaração de importação estática. E estável significa que ele tem que estar na parte superior do módulo. Então, deve estar aqui. E você também, normalmente, não tem permissão para fazer isso, por exemplo. Então, está funcionando aqui. Mas acho que na especificação, diz que nada mais deve vir antes da primeira declaração de entrada. Nada no meio. Portanto, você deve colocar suas, todas as suas entradas, suas importações estáticas na parte superior do arquivo, na parte superior do módulo. Então, nós tentamos isso. Isso não funciona. Mas há outra possibilidade. E é a função de importação, a função de importação dinâmica, que também é chamada de Importação. E é uma função que podemos chamá-la. E podemos fornecer parâmetros. E os parâmetros, é claro, o de. Então, de onde obter esse módulo. Então, pegamos o mesmo caminho, o mesmo módulo de uma importação estática e verificamos qual é o resultado. Portanto, não há nada impresso aqui. O que não é muito surpreendente, porque não estamos fazendo nada aqui. Portanto, se esse módulo for carregado apenas, não há código a ser executado aqui. Somente as declarações de função para fazer e fazer isso também. Então isso parece funcionar. Também podemos escrever um log do console aqui para ver se ele está realmente carregado e realmente executá-lo aqui. Depois de 1 segundo, mod um. Vamos recarregar a página. Após 1 segundo, vemos o mod um impresso aqui. Ok, então isso parece funcionar. Mas tudo bem, então como obtemos nosso módulo ou as exportações do módulo? Poderíamos tentar algo assim e colocar uma declaração de depurador aqui para verificá-la no depurador. Ok, então está parando aqui e verificamos o que é retornado da função de importação. Ok, este não é o módulo, como podemos ver. É uma promessa, uma suposta promessa. Se você não sabe o que são promessas, eu vou explicar agora. Mas não é o que esperávamos aqui. Pode-se pensar que, ok, tão importante é retornar o módulo, o módulo importante. Mas não é. Em vez disso, ele retorna uma promessa. E a promessa é algo para tarefas assíncronas. Portanto, importar está carregando um arquivo do servidor, que é naturalmente assíncrono. Então, ele precisa chegar ao servidor. E o servidor precisa enviar o código do módulo. E, em seguida, o mecanismo JavaScript precisa executar o código. Então, isso é algo que bloquearia o mecanismo JavaScript. isso que é assíncrono. E para processos assíncronos, temos a API Promise. Se você não estiver familiarizado com a API de promessa, podemos verificar o que é, quais são as propriedades da promessa retornada. Já sugere pegar finalmente, e então o importante é feito aqui. Então é um método na promessa. E é preciso uma função. E também, essa função tem um parâmetro. Nesse caso, é o módulo. Então eu deveria chamar isso de promessa. E então temos uma promessa e temos o método então. E então o método recebe um, você pode chamá-lo de métodos de retorno de chamada, função de retorno de chamada. E essa função de retorno de chamada é chamada se a promessa for resolvida. E, nesse caso, a promessa é resolvida quando o módulo foi carregado. E o parâmetro da função será o módulo. Podemos verificar isso se colocar um depurador aqui e excluir este, podemos verificar o que é mod. E se minha suposição for verdadeira, basta recarregar a página nafta 1 segundo. Estamos realmente chegando a esse depurador e verificamos o módulo. E sim, isso parece um módulo. Também é chamado de módulo aqui. E temos a exportação padrão aqui na propriedade padrão. E temos que fazer isso também. A função padrão foi chamada para fazer isso, mas é, você pode encontrá-la aqui no padrão. Portanto, o nome real não é usado como um nome de propriedade por padrão é usado aqui. E a segunda exportação foi fazer isso também, que é acessível pelo mesmo nome. Então, com isso, temos o módulo. Aqui, podemos usá-lo. Vamos fazer isso. E sugestões já estão lá, padrão ou faça isso também. Então, usamos primeiro o padrão. E então podemos usar dois a dois e verificar o que está impresso. Portanto, temos o mod um, que é impresso no início do módulo, do módulo carregado. Então temos que fazer e fazer também. Então é isso que esperávamos e está funcionando. Essa não é uma sintaxe muito boa que você possa escrevê-la de uma maneira melhor. E para isso, podemos usar o mecanismo async await ou a sintaxe async await. Se você tiver uma promessa, um valor de retorno com uma promessa como você fez com a importação. Você pode ligar ou escrever um peso. E isso significa que estamos esperando. Estamos aguardando a resolução da promessa. Portanto, é o mesmo que aqui nesta função de retorno de chamada. Exceto que não é uma função de retorno de chamada, mas é um tipo de código normal enquanto você o escreve. Em situações normais, situações síncronas, as únicas diferenças que temos nessa palavra-chave await. Então eu poderia escrever algo como constante mod igual ou receber uma importação de peso. Então isso espera, espera pela resolução da promessa. E o valor de retorno. Ou, nesse caso, o módulo será o valor dessa expressão. E eu estou atribuindo isso ao mod. E então eu posso chamar do it and default. E devido a, isso deve funcionar, exceto que eu esqueci algo. E essa é a palavra-chave async aqui. Portanto, se você estiver usando um peso, precisará usar async na função em que está usando o peso. Esses dois vão juntos. Se você tiver um peso, use sempre assíncrono. Na frente da função. Exceto que você também pode usá-lo no nível superior aqui. E então você não usa o async porque você não tem uma função. Mas assim que você tiver uma função, teremos uma porque estamos usando setTimeout. Você precisa usar o async antes. Antes da função. Você também pode usar uma função normal como essa. E antes da palavra-chave function, você precisa usar async ou antes a função de erro 40 seja uma sintaxe mais curta para isso. E se você usar o async, você também pode usar o await. Await pode ser usado em qualquer lugar onde você tenha um valor de retorno de uma promessa ou tenha uma promessa. Assim, você pode aguardar a resolução da promessa. Também há uma função no navegador chamada fetch, e também está retornando uma promessa e você também pode usar await com isso. Por exemplo, será algo assim. Aguarde e aqui você colocaria o URL. Bem, na verdade, podemos usá-lo. Podemos conferir o mod one dot js. Podemos carregá-lo como texto. Então, vamos verificar qual será a resposta. Isso não tem nada a ver com módulos, mas de qualquer forma, tem algo a ver com promessas e o peso. Então, estou mostrando aqui a resposta. A resposta é um objeto de resposta. Para obter os textos reais, precisamos chamar algo no objeto de resposta. E esse texto. E isso também está retornando uma promessa, como você pode ver. Então, já sabemos como usar promessas. Então, eu estou assinando mais textos com um peso, respondo ao texto. O texto pontual também está retornando uma promessa e estou aguardando a resolução dessa promessa. E então eu vou pegar o texto do mod. Vamos verificar isso. Mais texto. Sim, e então temos nosso texto de mod one dot js. Então, essa pequena excursão por promessas, que temos que usar aqui. Então, ou você usa pontos com a função de retorno de chamada. E essa função de retorno de chamada é chamada sempre que a promessa é resolvida. O que, neste caso, é quando o módulo foi carregado. Ou você usa a sintaxe muito mais agradável await import. E então você pega diretamente a molécula. E então você pode usar o módulo como se quisesse. Escreva um mod de importação estática do dot mod one, JS que será o mesmo. Então, neste caso, o mod seria o mesmo. Você pode chamar o padrão ou fazer isso também. Então, podemos testá-lo aqui. Sim, então estou recarregando. Primeiro. É escrever, fazer isso, fazer também com a importação estática e, em seguida, fazê-lo e fazê-lo também com uma importação dinâmica. Importação estática e, aqui, importação dinâmica. Então, se você quiser carregar um módulo bem a tempo, por exemplo, se o usuário navegar para uma nova página e você quiser renderizar um novo controle. Em seguida, você pode usar a importação dinâmica. E isso retorna uma promessa. E você tem que esperar a promessa ou usar os métodos dot then. E então você obtém o módulo. Assim como se você usasse essa sintaxe. 4. Conclusão: Então, neste vídeo, concluirei o curso e resumirei o que mostrei sobre os módulos ES6. Vimos como integrar módulos em HTML com uma tag de script e um módulo de tipo. Então este foi o nosso primeiro módulo aqui, js principal. Em seguida, importamos o segundo módulo em nosso primeiro módulo em nosso primeiro módulo. E esse é o segundo módulo. Nós exportamos duas funções aqui. Uma é uma exportação padrão e a outra não. E você viu como importar o módulo inteiro, o módulo completo com esse asterisco. Também vimos como importar apenas exportações específicas. Então, por exemplo, aqui importamos apenas dois. Ou também podemos importar o padrão como fazê-lo. E, finalmente, vimos como usar a função de entrada aqui, que é usada para carregar módulos dinamicamente em tempo de execução. E aprendemos como usar a API de promessa e como usar as novas palavras-chave, um único peso, para usar a função de importação e obter imediatamente o módulo para que possamos chamar as funções exportadas aqui . Então, espero que você tenha gostado do curso e espero que agora você possa usar os módulos ES6 com sucesso. E com um pouco de confiança. à vontade para conferir meus outros cursos sobre desenvolvimento web e JavaScript. E boa sorte para você e adeus.