ES6 - Módulos

Introdução

Considere um cenário em que partes do código JavaScript precisam ser reutilizadas. ES6 vem em seu socorro com o conceito de Modules.

Um módulo organiza um conjunto relacionado de código JavaScript. Um módulo pode conter variáveis ​​e funções. Um módulo nada mais é do que um pedaço de código JavaScript escrito em um arquivo. Por padrão, as variáveis ​​e funções de um módulo não estão disponíveis para uso. Variáveis ​​e funções dentro de um módulo devem ser exportadas para que possam ser acessadas de outros arquivos. Módulos em ES6 funcionam apenas emstrict mode. Isso significa que as variáveis ​​ou funções declaradas em um módulo não estarão acessíveis globalmente.

Exportando um Módulo

A palavra-chave export pode ser usada para exportar componentes em um módulo. As exportações em um módulo podem ser classificadas da seguinte forma -

  • Exportações Nomeadas
  • Exportações padrão

Exportações Nomeadas

As exportações nomeadas são diferenciadas por seus nomes. Pode haver várias exportações nomeadas em um módulo. Um módulo pode exportar componentes selecionados usando a sintaxe fornecida abaixo -

Syntax 1

//using multiple export keyword
export component1
export component2
...
...
export componentN

Syntax 2

Como alternativa, os componentes em um módulo também podem ser exportados usando uma única palavra-chave de exportação com {} sintaxe de ligação conforme mostrado abaixo -

//using single export keyword

export {component1,component2,....,componentN}

Exportações padrão

Módulos que precisam exportar apenas um único valor podem usar exportações padrão. Só pode haver uma exportação padrão por módulo.

Syntax

export default component_name

No entanto, um módulo pode ter uma exportação padrão e várias exportações nomeadas ao mesmo tempo.

Importando um Módulo

Para poder consumir um módulo, use o import keyword. Um módulo pode ter váriosimport statements.

Importando Exportações Nomeadas

Ao importar exportações nomeadas, os nomes dos componentes correspondentes devem corresponder.

Syntax

import {component1,component2..componentN} from module_name

No entanto, ao importar exportações nomeadas, elas podem ser renomeadas usando a palavra-chave as. Use a sintaxe fornecida abaixo -

import {original_component_name as new_component_name }

Todas as exportações nomeadas podem ser importadas para um objeto usando o asterisco * operator.

import * as variable_name from module_name

Importando Exportações Padrão

Ao contrário das exportações nomeadas, uma exportação padrão pode ser importada com qualquer nome.

Syntax

import any_variable_name from module_name

Exemplo: Exportações Nomeadas

Step 1 - Crie um arquivo company1.js e adicione o seguinte código -

let company = "TutorialsPoint"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}

Step 2- Crie um arquivo company2.js. Este arquivo consome componentes definidos no arquivo company1.js. Use qualquer uma das seguintes abordagens para importar o módulo.

Approach 1

import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())

Approach 2

import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())

Approach 3

import * as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)

Step 3 - Execute os módulos usando um arquivo HTML

Para executar ambos os módulos, precisamos fazer um arquivo html conforme mostrado abaixo e executá-lo no servidor live. Observe que devemos usar oattribute type="module" na tag de script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

A saída do código acima será conforme indicado abaixo -

TutorialsPoint
TUTORIALSPOINT

Exportação Padrão

Step 1 - Crie um arquivo company1.js e adicione o seguinte código -

let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

Step 2 - Crie um arquivo company2.js. Este arquivo consome os componentes definidos no arquivo company1.js.

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

Step 3 - Execute o modules usando um HTML file

Para executar ambos os módulos, precisamos fazer um arquivo html conforme mostrado abaixo e executá-lo no servidor live. Observe que devemos usar oattribute type="module" na tag de script.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

A saída do código acima será conforme mencionado abaixo -

TutorialsPoint
Google Inc

Exemplo: Combinando Exportações Padrão e Nomeadas

Step 1 - Crie um arquivo company1.js e adicione o seguinte código -

//named export
export let name = 'TutorialsPoint'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

Step 2 - Crie um arquivo company2.js. Este arquivo consome os componentes definidos nocompany1.jsArquivo. Importe a exportação padrão primeiro, seguida pelas exportações nomeadas.

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())

Step 3 - Execute os módulos usando um arquivo HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

A saída do código acima será conforme mostrado abaixo -

TutorialsPoint
TutorialsPoint
Mohtashim