Exportação JavaScript

Resumo : Neste tutorial, você aprenderá como usar a palavra-chave de exportação JavaScript para exportar valores de um módulo.

Introdução à palavra-chave de exportação JavaScript

Os módulos ES6 permitem estruturar o código JavaScript de forma modular. Os módulos fornecem uma maneira padronizada de definir e importar/exportar trechos de código reutilizáveis ​​em um aplicativo JavaScript.

Por padrão, os módulos ES6 encapsulam seu código. Isso significa que os valores ( variáveis , funções , classes , etc.) definidos em um módulo não são acessíveis de fora do módulo por padrão. Isso evita conflitos de nomenclatura e promove uma melhor estrutura de código.

Os módulos podem exportar valores (variáveis, funções, classes, etc.) usando a exportpalavra-chave.

A exportpalavra-chave exporta valores de um módulo para que você possa usá-los em outros módulos. Existem dois tipos de exportações:

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

Um módulo pode ter múltiplas exportações nomeadas , mas apenas uma exportação padrão .

Exportações nomeadas

Um módulo pode ter múltiplas exportações nomeadas. Na prática, você usa exportações nomeadas quando precisa exportar vários valores de um módulo.

Exportando variáveis

O exemplo a seguir mostra como exportar uma variável countde um módulo:

let count = 1;
export { count };Linguagem de código:  JavaScript  ( javascript )

Neste exemplo:

• Primeiro, declare uma variável counte inicialize seu valor como 100.
• Em seguida, exporte a countvariável colocando-as entre chaves que seguem a exportpalavra-chave.

É possível combinar a declaração da variável e a exportação em uma única instrução como esta:

export let count = 1;Linguagem de código:  JavaScript  ( javascript )

Da mesma forma, você pode exportar variáveis ​​declaradas usando a constpalavra-chave:

export const MIN = 0;Linguagem de código:  JavaScript  ( javascript )

Para exportar múltiplas variáveis, você as separa usando uma vírgula ( ,):

let count = 1;
const MIN = 0, MAX = 10;

export { MIN, MAX, count };Linguagem de código:  JavaScript  ( javascript )

Exportando funções

As funções de exportação compartilham a mesma sintaxe das variáveis ​​de exportação:

function increase() {
  // ..
}
export { increase };Linguagem de código:  JavaScript  ( javascript )

E:

export function increase() {
  // ...
}Linguagem de código:  JavaScript  ( javascript )

Exportando classes

Gosta de variáveis ​​e funções, você pode exportar classes usando a exportpalavra-chave por exemplo:

class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}

export { Counter };Linguagem de código:  JavaScript  ( javascript )

Neste exemplo, definimos uma Counterclasse e a exportamos. Você pode definir uma classe e exportá-la usando uma única instrução da seguinte maneira:

export class Counter {
  constructor() {
    this.count = 1;
  }
  increase() {
    this.count++;
  }
  get current() {
    return this.count;
  }
}Linguagem de código:  JavaScript  ( javascript )

Ao importar exportações nomeadas, você precisa usar o nome exato e especificá-los entre chaves. Por exemplo, o seguinte importa a Counterclasse:

import { Counter } from 'module.js';Linguagem de código:  JavaScript  ( javascript )

Exportações padrão

Um módulo pode ter uma exportação padrão. Para exportar um valor usando uma exportação padrão, você usa a default exportpalavra-chave. Por exemplo:

let message = 'Hi';
export { default as message };Linguagem de código:  JavaScript  ( javascript )

É equivalente ao seguinte:

export default let message = 'Hi';Linguagem de código:  JavaScript  ( javascript )

Ao importar uma exportação padrão, você não precisa colocar a variável entre chaves:

import message from 'module.js';Linguagem de código:  JavaScript  ( javascript )

Observe que se a mensagem foi exportada usando uma exportação nomeada, você a colocaria entre chaves:

import { message} from 'module.js';Linguagem de código:  JavaScript  ( javascript )

Esta é a principal diferença entre importar uma exportação nomeada e uma exportação padrão.

Da mesma forma, você pode exportar uma função ou classe de um módulo usando exportações padrão:

export default function increase() {
   // ..
}Linguagem de código:  JavaScript  ( javascript )

E:

export default class Counter {
   // ...
}Linguagem de código:  JavaScript  ( javascript )

Renomeando exportações nomeadas

Ao exportar um valor usando uma exportação nomeada, você pode renomeá-lo assim:

class Counter {
  // ..
}

export { Counter as MyCounter };Linguagem de código:  JavaScript  ( javascript )

Renomear um valor durante a exportação ajuda a evitar conflitos de nomenclatura. Observe que os módulos que importam a classe também podem renomeá-la durante a importação:

import { Counter as MyCounter } from 'module.js';Linguagem de código:  JavaScript  ( javascript )

Reexportação

Um módulo pode importar valores de outro módulo e exportá-los imediatamente da seguinte forma:

import { Counter } from 'module.js';
export { Counter };Linguagem de código:  JavaScript  ( javascript )

JavaScript permite encurtar isso usando a export fromsintaxe:

export { Counter } from 'module.js';Linguagem de código:  JavaScript  ( javascript )

Resumo

• Use a palavra-chave JavaScript exportpara exportar variáveis, funções e classes de um módulo.
• As exportações podem ser denominadas exportações e exportações padrão. Um módulo pode ter múltiplas exportações nomeadas, mas apenas uma exportação padrão.