Importação de JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar a palavra-chave JavaScript import para importar variáveis, funções e classes de outro módulo.

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

Os módulos ES6 permitem estruturar o código JavaScript em módulos e compartilhar valores (variáveis, funções, classes, etc.) entre eles.

Para importar valores de um módulo, você usa a importpalavra-chave. Além disso, você precisa carregar o arquivo fonte JavaScript como um módulo. Em HTML, você pode fazer isso especificando na type="module"tag do script:

<script type="module" src="app.js"></script>Linguagem de código:  JavaScript  ( javascript )

Daremos um exemplo simples para ilustrar como usar a importpalavra-chave.

Suponha que temos um projeto com a seguinte estrutura:

├── index.html
└── js
   ├── app.js
   └── greeting.jsLinguagem de código:  JavaScript  ( javascript )

Neste projeto, index.htmlcarrega o app.jscomo 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>JavaScript import</title>
    </head>
    <body>
        <script src="js/app.js" type="module"></script>
    </body>
</html>Linguagem de código:  JavaScript  ( javascript )

O greeting.jsmódulo possui uma função sayHi()que exibe uma mensagem. Ele exporta a sayHi()função como uma exportação padrão:

export default function sayHi() {
  alert('Hi');
}Linguagem de código:  JavaScript  ( javascript )

O app.jsirá importar o sayHi()método do greeting.jsmódulo e executá-lo.

Importar uma exportação padrão

Se um módulo usar uma exportação padrão, você poderá importar a exportação padrão desse módulo usando a seguinte sintaxe:

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

Por exemplo, você pode importar a sayHi()função de greeting.jsmódulo para app.jsmódulo da seguinte maneira:

import sayHi from './greeting.js';

sayHi();Linguagem de código:  JavaScript  ( javascript )

Se você abrir index.htmlno navegador da web, verá uma mensagem de alerta.

Como a sayHi()função é uma exportação padrão, você pode atribuir a ela os nomes que desejar ao importá-la.

Por exemplo, você pode importar a sayHifunção do greeting.jsmódulo e definir seu nome displayGreeting()da seguinte forma:

import displayGreeting from './greeting.js';

displayGreeting();Linguagem de código:  JavaScript  ( javascript )

Importar exportações nomeadas

Ao contrário de importar uma exportação padrão, você precisa especificar o nome exato das exportações nomeadas ao importá-las para um módulo. Além disso, você precisa colocar as exportações nomeadas entre chaves.

Esta é a sintaxe para importar exportações nomeadas:

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

Por exemplo, podemos modificar o greeting.jsmódulo que contém duas exportações nomeadas:

export function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Linguagem de código:  JavaScript  ( javascript )

Para importar as funções sayHi()e sayBye()para o app.jsmódulo, use o seguinte código:

import { sayHi, sayBye } from './greeting.js';Linguagem de código:  JavaScript  ( javascript )

Você também pode chamar estas funções:

import { sayHi, sayBye } from './greeting.js';

sayHi();
sayBye();Linguagem de código:  JavaScript  ( javascript )

Se você abrir no index.htmlnavegador da web, verá dois alertas criados por essas duas funções.

Importação de namespace

Um objeto de namespace de módulo é um objeto estático que inclui todas as exportações de um módulo. É um objeto estático que o JavaScript cria ao avaliar o módulo.

Para acessar o objeto de namespace do módulo, use a seguinte sintaxe:

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

Nesta sintaxe, nameé o objeto de namespace do módulo que inclui todas as exportações do module.jsmódulo como propriedades.

Por exemplo, se modules.jstiver as exportações myVariable, myFunction, e myClassnomeadas, você poderá acessá-las por meio do nameobjeto como este:

name.myVariable
name.myFunction
name.myClassLinguagem de código:  JavaScript  ( javascript )

Para ilustrar como funciona a importação de namespace, podemos alterar app.jspara usar a importação de namespace da seguinte maneira:

import * as greeting from './greeting.js';

greeting.sayHi();
greeting.sayBye();Linguagem de código:  JavaScript  ( javascript )

O seguinte especifica o greetingobjeto de namespace do módulo:

import * as greeting from './greeting.js';Linguagem de código:  JavaScript  ( javascript )

Assim que tivermos o objeto namespace do módulo, podemos chamar as funções sayHi()e :sayBye()

greeting.sayHi();
greeting.sayBye();Linguagem de código:  JavaScript  ( javascript )

Se o módulo de importação tiver uma exportação padrão, você poderá acessá-lo através da defaultpalavra-chave:

name.defaultLinguagem de código:  JavaScript  ( javascript )

Por exemplo, podemos alterar a sayHifunção para uma exportação padrão no greeting.jsmódulo:

export default function sayHi() {
  alert('Hi');
}

export function sayBye() {
  alert('Bye');
}Linguagem de código:  JavaScript  ( javascript )

E importe as exportações do greeting.jsmódulo para o app.jsmódulo usando a importação de namespace:

import * as greeting from './greeting.js';

greeting.default(); // sayHi()
greeting.sayBye();Linguagem de código:  JavaScript  ( javascript )

Neste caso, podemos chamar a sayHi()função através do default()mostrado acima. Observe que você não pode acessar a sayHi()função usando seu nome assim:

greeting.sayHi();Linguagem de código:  JavaScript  ( javascript )

Se você fizer isso, receberá o seguinte erro:

Uncaught TypeError: greeting.sayHi is not a functionLinguagem de código:  JavaScript  ( javascript )

Renomeando uma exportação nomeada

Ao importar uma exportação nomeada, você pode atribuir um novo nome a ela. É útil quando você importa a função com o mesmo nome de módulos diferentes:

import { name as name1 } from "module1.js";
import { name as name2 } from "module2.js";Linguagem de código:  JavaScript  ( javascript )

Por exemplo, o seguinte ilustra como renomear as funções sayHi()e sayBye()para hi()e bye()ao importar para o app.jsmódulo:

import { sayHi as hi, sayBye as bye } from './greeting.js';

hi();
bye();Linguagem de código:  JavaScript  ( javascript )

Resumo

Use a palavra-chave JavaScript importpara importar variáveis, funções e classes para um módulo.

Exportação JavaScript

Importação dinâmica de JavaScript