diff options
Diffstat (limited to 'files/pt-br/web/javascript/reference/statements/import/index.html')
| -rw-r--r-- | files/pt-br/web/javascript/reference/statements/import/index.html | 286 |
1 files changed, 286 insertions, 0 deletions
diff --git a/files/pt-br/web/javascript/reference/statements/import/index.html b/files/pt-br/web/javascript/reference/statements/import/index.html new file mode 100644 index 0000000000..a87ed0f4bf --- /dev/null +++ b/files/pt-br/web/javascript/reference/statements/import/index.html @@ -0,0 +1,286 @@ +--- +title: import +slug: Web/JavaScript/Reference/Statements/import +tags: + - ECMAScript 2015 + - JavaScript + - Modules + - Reference + - Statement + - dynamic import + - import +translation_of: Web/JavaScript/Reference/Statements/import +--- +<div>{{jsSidebar("Statements")}}</div> + +<div> +<p>A declaração estática <strong><code>import</code></strong> é usada para importar vínculos que são exportados por um outro módulo. Os módulos importados estão em {{JSxRef("Strict_mode","strict mode")}}, declarado como tal ou não. A declaração <code>import</code> não pode ser usada em scripts embutidos, a menos que tal script tenha um <code>type="module"</code>.</p> + +<p>Há também uma função dinâmica<strong> </strong><code><strong>import()</strong></code>, que não requer scripts de <code>type="module"</code>.</p> + +<p>A compatibilidade com versões anteriores pode ser garantida usando o atributo <code>nomodule </code>na tag de script.</p> + +<p>A importação dinâmica é útil em situações em que você deseja carregar um módulo condicionalmente ou sob demanda. A forma estática é preferível para carregar dependências iniciais e pode se beneficiar mais prontamente de ferramentas de análise estática e <a href="/en-US/docs/Glossary/Tree_shaking">tree shaking</a>.</p> +</div> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre>import <em>defaultExport</em> from "<em>module-name</em>"; +import * as <em>name</em> from "<em>module-name</em>"; +import { <em>export </em>} from "<em>module-name</em>"; +import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; +import { <em>export1 , export2</em> } from "<em>module-name</em>"; +import { <em>foo , bar</em> } from "<em>module-name/path/to/specific/un-exported/file</em>"; +import { <em>export1 , export2</em> as <em>alias2</em> , <em>[...]</em> } from "<em>module-name</em>"; +import <em>defaultExport</em>, { <em>export</em> [ , <em>[...]</em> ] } from "<em>module-name</em>"; +import <em>defaultExport</em>, * as <em>name</em> from "<em>module-name</em>"; +import "<em>module-name</em>"; var <em>promise</em> = import("module-name"); // This is a stage 3 proposal.</pre> + +<dl> + <dt><code>defaultExport</code></dt> + <dd>Nome que de referência para a exportação padrão do módulo.</dd> + <dt><code>module-name</code></dt> + <dd>O módulo para importar. Geralmente, esse é um nome de caminho relativo ou absoluto para o arquivo <code>.js</code> contendo esse módulo. Certos empacotadores podem permitir ou exigir o uso da extensão; verifique seu ambiente. Apenas aspas simples e aspas duplas são permitidas.</dd> + <dt><code>name</code></dt> + <dd>Nome do objeto do módulo que será usado como um tipo de espaço de nomes ao se referir às importações.</dd> + <dt><code>export, exportN</code></dt> + <dd>Nome das exportações a serem importadas.</dd> + <dt><code>alias, aliasN</code></dt> + <dd>Nomes que se referem às importações nomeadas.</dd> +</dl> + +<h2 id="Descrição">Descrição</h2> + +<p>O parâmetro name é o nome do "objeto módulo", que será usado como um tipo de namespace para se referir às exportações. Os parâmetros de exportação especificam exportações nomeadas individuais, enquanto a importação * como sintaxe de nome importa todos eles. Abaixo estão alguns exemplos para esclarecer a sintaxe.</p> + +<h3 id="Importar_o_conteúdo_de_todo_um_módulo">Importar o conteúdo de todo um módulo</h3> + +<p>Isso insere <code>myModule</code> no escopo atual, contendo todas as exportações do módulo no arquivo localizado em <code>/modules/my-module.js</code>.</p> + +<pre><code>import * as myModule from '/modules/my-module.js';</code></pre> + +<p>Aqui, acessar as exportações significa usar o nome do módulo ("myModule" neste caso) como um namespace. Por exemplo, se o módulo importado acima incluir um export <code>doAllTheAmazingThings()</code>, você o chamaria assim:</p> + +<pre><code>myModule.doAllTheAmazingThings();</code></pre> + +<h3 id="Importar_uma_única_exportação_de_um_módulo">Importar uma única exportação de um módulo</h3> + +<p>Dado um objeto ou valor chamado <code>myExport</code>que foi exportado do módulo <code>my-module</code> implicitamente (porque o módulo inteiro é exportado) ou explicitamente (usando a instrução {{JSxRef("Statements/export", "export")}} statement), isso insere <code>myExport</code> no escopo atual.</p> + +<pre><code>import {myExport} from '</code>/modules/my-module.js';</pre> + +<h3 id="Importar_várias_exportações_do_módulo">Importar várias exportações do módulo</h3> + +<p>Isso inclui tanto <code>foo</code> como <code>bar</code> no escopo atual.</p> + +<h3 id="Importar_uma_exportação_com_um_alias_mais_conveniente">Importar uma exportação com um alias mais conveniente</h3> + +<p>Você pode renomear uma exportação ao importá-la. Por exemplo, isso insere <code>shortName</code> no escopo atual.</p> + +<p> </p> + +<pre><code>import {reallyReallyLongModuleExportName as shortName} +</code> from '/modules/my-module.js';</pre> + +<h3 id="Renomear_várias_exportações_durante_a_importação">Renomear várias exportações durante a importação</h3> + +<p>Importe várias exportações de um módulo com aliases convenientes.</p> + +<p> </p> + +<pre><code>import { + reallyReallyLongModuleExportName as shortName, + anotherLongModuleName as short +</code>} from '/modules/my-module.js';</pre> + +<h3 id="Importar_um_módulo_apenas_para_seus_efeitos_colaterais">Importar um módulo apenas para seus efeitos colaterais</h3> + +<p>Importe um módulo inteiro somente para efeitos colaterais, sem importar nada. Isso executa o código global do módulo, mas na verdade não importa nenhum valor.</p> + +<p> </p> + +<pre>import '/modules/my-module.js';</pre> + +<h3 id="Importando_Padrões">Importando Padrões</h3> + +<p>É possível ter um padrão {{JSxRef ("Declarações / exportação", "exportação")}} (seja um objeto, uma função, uma classe etc.). A declaração de importação pode então ser usada para importar esses padrões.</p> + +<p> </p> + +<p>A versão mais simples importa diretamente o padrão:</p> + +<p> </p> + +<pre><code>import myDefault from '/modules/my-module.</code>js';</pre> + +<p> </p> + +<p>Também é possível usar a sintaxe padrão com as vistas acima (importações de namespace ou importações nomeadas). Em tais casos, a importação padrão terá que ser declarada primeiro. Por exemplo:</p> + +<p> </p> + +<pre><code>import myDefault, * as myModule from '/modules/my-module.js'; +// myModule used as a namespac</code>e</pre> + +<p>Ou</p> + +<p> </p> + +<pre><code>import myDefault, {foo, bar} from '/modules/my-module.js'; +</code>// specific, named imports</pre> + +<p> </p> + +<h3 id="Importações_Dinâmicas">Importações Dinâmicas</h3> + +<p> </p> + +<p>A palavra-chave <code>import</code> pode ser chamada como uma função para importar dinamicamente um módulo. Quando usado dessa maneira, retorna uma promessa.</p> + +<p> </p> + +<pre><code>import('/modules/my-module.js') + .then((module) => { + // Do something with the module. + </code> });</pre> + +<p> </p> + +<p>Este formulário também suporta a palavra-chave await.</p> + +<p> </p> + +<pre><code>let module = await import('/modules/my-module.js');</code> +</pre> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="Padrão_Import">Padrão Import</h3> + +<p>O código abaixo mostra como importar um módulo secundário para auxiliar no processamento de uma requisição AJAX que retorna um JSON.</p> + +<p> </p> + +<h4 id="O_Módulo_file.js">O Módulo: file.js</h4> + +<p> </p> + +<pre><code>function getJSON(url, callback) { + let xhr = new XMLHttpRequest(); + xhr.onload = function () { + callback(this.responseText) + }; + xhr.open('GET', url, true); + xhr.send(); +} + +export function getUsefulContents(url, callback) { + getJSON(url, data => callback(JSON.parse(data))); +}</code></pre> + +<p><strong>O programa principal: main.js</strong></p> + +<p> </p> + +<pre class="brush: js">im<code>port { getUsefulContents } from '/modules/file.js'; + +getUsefulContents('http://www.example.com', + data => { doSomethingUseful(data); });</code></pre> + +<h3 id="Dynamic_Import">Dynamic Import</h3> + +<p>Este exemplo mostra como carregar a funcionalidade em uma página com base em uma ação do usuário, nesse caso, um clique no botão e, em seguida, chamar uma função dentro desse módulo. Esta não é a única maneira de implementar essa funcionalidade. A função <code>import()</code> também é compatível com <code>await</code>.</p> + +<p> </p> + +<pre class="brush: js"><code>const main = document.querySelector("main"); +for (const link of document.querySelectorAll("nav > a")) { + link.addEventListener("click", e => { + e.preventDefault(); + + import('/modules/my-module.js') + .then(module => { + module.loadPageInto(main); + }) + .catch(err => { + main.textContent = err.message; + }); + }); +}</code></pre> + +<p> </p> + +<p> </p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificação</th> + <th scope="col">Estado</th> + <th scope="col">Comentário</th> + </tr> + <tr> + <td><a href="https://github.com/tc39/proposal-dynamic-import/#import">"function-like" dynamic <code>import()</code> proposal</a></td> + <td>Stage 3</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ESDraft", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ESDraft")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2018", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2018")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2017", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2017")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2016", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2016")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("ES2015", "#sec-imports", "Imports")}}</td> + <td>{{Spec2("ES2015")}}</td> + <td>Definição inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_entre_navegadores">Compatibilidade entre navegadores</h2> + +<p>{{Compat("javascript.statements.import")}}</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>{{JSxRef("Statements/export", "export")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></li> + <li><a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> + <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> + <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li> + <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> +</ul> |