Merge pull request #53 from fiji-flo/unslugging-es

Unslugging es

1 files changed, 178 insertions, 0 deletions

diff --git a/files/es/web/javascript/reference/statements/import/index.html b/files/es/web/javascript/reference/statements/import/index.html
new file mode 100644
index 0000000000..b889a8babb
--- /dev/null
+++ b/files/es/web/javascript/reference/statements/import/index.html
@@ -0,0 +1,178 @@
+---
+title: import
+slug: Web/JavaScript/Reference/Statements/import
+tags:
+  - ECMAScript 2015
+  - JavaScript
+  - Módulos
+  - Sentencia
+  - import
+translation_of: Web/JavaScript/Reference/Statements/import
+original_slug: Web/JavaScript/Referencia/Sentencias/import
+---
+<div>{{jsSidebar("Sentencias")}}</div>
+
+<p>La sentencia <code><strong>import</strong></code> se usa para importar funciones que han sido exportadas desde un módulo externo.</p>
+
+<div class="note">
+<p>Por el momento, esta característica sólo está <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">comenzando a ser implementada</a> de forma nativa en los navegadores. Está implementada en muchos transpiladores, tales como Typescript y <a href="http://babeljs.io/">Babel</a>, y en empaquetadores como <a href="https://github.com/rollup/rollup">Rollup</a> y <a href="https://webpack.js.org/">Webpack</a>.</p>
+</div>
+
+<h2 id="Sintaxis">Sintaxis</h2>
+
+<pre class="syntaxbox">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>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>";</pre>
+
+<dl>
+ <dt><code>defaultExport</code></dt>
+ <dd>Nombre que se referirá al export por defecto del módulo.</dd>
+ <dt><code>module-name</code></dt>
+ <dd>El módulo desde el que importar. Normalmente es una ruta relativa o absoluta al archivo <code><strong>.js</strong></code> que contiene el módulo, excluyendo la extensión <code><strong>.js</strong></code>. Algunos empaquetadores pueden permitir o requerir el uso de la extensión; comprueba tu entorno. Sólo se permiten Strings con comillas simples o dobles.</dd>
+ <dt><code>name</code></dt>
+ <dd>Nombre del objeto del módulo que se utilizará como nombre de dominio al hacer referencia a los imports.</dd>
+ <dt><span style='background-color: rgba(220, 220, 220, 0.5); font-family: consolas,"Liberation Mono",courier,monospace; font-style: inherit; font-weight: inherit;'>export, exportN</span></dt>
+</dl>
+
+<dl>
+ <dd>Nombre de los exports a ser importados.</dd>
+ <dt><code>alias, aliasN</code></dt>
+ <dd>Nombre del objeto que recibirá la propiedad importada.</dd>
+</dl>
+
+<h2 id="Descripción">Descripción</h2>
+
+<p>El parámetro <code>name</code> es el nombre del objeto que recibirá los miembros exportados. El parámetro <code>member</code> especifica miembros individuales, mientras el parámetro <code>name</code> importa todos ellos. <font face="Courier New, Andale Mono, monospace">name</font> puede también ser una función si el módulo exporta un sólo parámetro por defecto en lugar de una serie de miembros. Abajo hay ejemplos que explican la sintaxis.</p>
+
+<h3 id="Importa_el_contenido_de_todo_un_módulo.">Importa el contenido de todo un módulo.</h3>
+
+<p>Esto inserta <code>myModule</code> en el ámbito actual, que contiene todos los elementos exportados en el archivo ubicado en  <code>/modules/my-module.js</code>.</p>
+
+<pre class="brush: js">import * as myModule from '/modules/my-module.js';</pre>
+
+<p>Aquí, para acceder a los miembros exportados habrá que usar el alias del módulo ("myModule" en este caso) como namespace. Por ejemplo, si el módulo importado arriba incluye un miembre exportado llamado <code>doAllTheAmazingThings()</code>, habría que invocarlo de la siguiente manera:</p>
+
+<pre class="brush: js">myModule.doAllTheAmazingThings();</pre>
+
+<h3 id="Importa_un_solo_miembro_de_un_módulo.">Importa un solo miembro de un módulo.</h3>
+
+<p>Dado un objeto o valor llamado <code>myExport</code> que ha sido exportado del módulo <code>my-module</code> ya sea implícitamente (porque todo el módulo ha sido exportado) o explícitamente (usando la sentencia {{jsxref("Sentencias/export", "export")}} ), esto inserta <code>myExport</code> en el ámbito actual.</p>
+
+<pre class="brush: js">import {myExport} from '/modules/my-module.js';</pre>
+
+<h3 id="Importa_multiples_miembros_de_un_módulo.">Importa multiples miembros de un módulo.</h3>
+
+<p>Esto inserta <code>foo</code> y <code>bar</code> en el ámbito actual.</p>
+
+<pre class="brush: js">import {foo, bar} from "my-module.js";</pre>
+
+<h3 id="Importa_un_miembre_con_un_alias_mas_conveniente">Importa un miembre con un alias mas conveniente</h3>
+
+<p>Se puede renombrar un miembro exportado cuando se importa. Por ejemplo, esto inserta <code>shortName</code> en el ámbito actual.</p>
+
+<pre class="brush: js">import {reallyReallyLongModuleExportName as shortName}
+  from '/modules/my-module.js';</pre>
+
+<h3 id="Renombra_multiples_miembros_durante_la_importación">Renombra multiples miembros durante la importación</h3>
+
+<p>Importa múltiples miembros exportados de un módulo con un alias conveniente.</p>
+
+<pre class="brush: js">import {
+  reallyReallyLongModuleExportName as shortName,
+  anotherLongModuleName as short
+} from '/modules/my-module.js';</pre>
+
+<h3 id="Importa_un_módulo_entero_para_efectos_secundarios_sólamente">Importa un módulo entero para efectos secundarios sólamente</h3>
+
+<p>Importa un módulo entero para efectos secundarios sólamente, sin importar ningun elemento. Esto ejecuta el código global del módulo, pero no importa ningún valor.</p>
+
+<pre class="brush: js">import '/modules/my-module.js';</pre>
+
+<h3 id="Importación_de_elementos_por_defecto">Importación de elementos por defecto</h3>
+
+<p>Es posible tener una exportación por defecto (tanto si se trata de un objeto, función, clase, etc.). Recíprocamente, es posible usa la instrucción <code>import</code> para importar esos elementos establecidos como por defecto.</p>
+
+<p>La versión más sencilla de importar un elemento por defecto es:</p>
+
+<pre class="brush: js">import myDefault from '/modules/my-module.js';</pre>
+
+<p>También es posible usar la sintaxis por defecto con lo que hemos visto anteriormente (importación de espacios de nombres o importaciones con nombre. En esos casos, la importación por defecto se deberá realizar en primer lugar. Por ejemplo:</p>
+
+<pre class="brush: js">import myDefault, * as myModule from '/modules/my-module.js';
+// myModule used as a namespace</pre>
+
+<p>o</p>
+
+<pre class="brush: js">import myDefault, {foo, bar} from '/modules/my-module.js';
+// specific, named imports</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Importar un archivo secundario para asistir en un procesamiento de una petición JSON AJAX.</p>
+
+<h3 id="El_módulo_file.js">El módulo: file.js</h3>
+
+<pre class="brush: js">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 =&gt; callback(JSON.parse(data)));
+}</pre>
+
+<h3 id="El_programa_principal_main.js">El programa principal: main.js</h3>
+
+<pre class="brush: js">import { getUsefulContents } from '/modules/file.js';
+
+getUsefulContents('http://www.example.com',
+    data =&gt; { doSomethingUseful(data); });</pre>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table>
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('ES6', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ES6')}}</td>
+   <td>Definición inical</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('ESDraft', '#sec-imports', 'Imports')}}</td>
+   <td>{{Spec2('ESDraft')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>
+
+<div class="hidden">
+<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
+</div>
+
+<p>{{Compat("javascript.statements.import")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>{{jsxref("Sentencias/export", "export")}}</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="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li>
+</ul>