aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/javascript/referencia/sentencias/import.meta/index.html
blob: 8c09e9747516e85a4d111ea5ae3048a1222157d9 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
---
title: import.meta
slug: Web/JavaScript/Referencia/Sentencias/import.meta
translation_of: Web/JavaScript/Reference/Statements/import.meta
---
<div>{{JSSidebar("Statements")}}</div>

<p>El objeto<strong> <code>import.meta</code></strong> expone el contenido especifico de la metadata al módulo JavaScript. Este contiene informacion sobre el módulo, como por ejemplo, la URL del mismo.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">import.meta</pre>

<h2 id="Descripción">Descripción</h2>

<p>La sintasis consiste de la palabra clave  {{JSxRef("Statements/import","import")}},un punto, y un identificador <code>meta</code>. Normalmente, la parte a la izquierda del punto es el objeto sobre el cual la accion es realizada, pero aqui <code>import</code> no es realmente un objeto.</p>

<p>El objeto <code>import.meta</code> es creado por la implementacion ECMAScript , con un prototipo {{JSxRef("null")}} . El objeto es extensible y sus propiedades son grabables, editables y enumerables.</p>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Usando_import.meta">Usando import.meta</h3>

<p>Dado un módulo <code>my-module.js</code></p>

<pre class="brush: html">&lt;script type="module" src="my-module.js"&gt;&lt;/script&gt;
</pre>

<p>puedes acceder a la meta información  sobre el módulo usando el objeto <code>import.meta</code>.</p>

<pre class="brush: js;">console.log(import.meta); // { url: "file:///home/user/my-module.js" }</pre>

<p>Este retorna un objeto con una propiedad  <code>url</code>  indicando la URL base del módulo.Esta será la URL de la que el script fue obtenido, por scripts externos, o  la URL base del documento que contiene el documento, por scripts inline.</p>

<p>Nota que este incluirá parametros de la consulta y/o el hash (ej: seguido del <code>?</code> or <code>#</code>).</p>

<p>Por ejemplo, con el siguiente HTML:</p>

<pre class="brush: html">&lt;script type="module"&gt;
import './index.mjs?someURLInfo=5';
&lt;/script&gt;</pre>

<p>..El siguiente archivo JavaScript registrará el parámetro <code>someURLInfo</code>:</p>

<pre class="brush: js">// index.mjs
new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre>

<p>Lo mismo aplica cuando un archivo importa otro:</p>

<pre class="brush: js">// index.mjs
import './index2.mjs?someURLInfo=5';

// index2.mjs
new URL(import.meta.url).searchParams.get('someURLInfo'); // 5</pre>

<p>Nota que mientras Node.js pasa en la consulta los parámetros (o el hash ) como en el último ejemplo, a partir de Node 14.1.0, una URL con parametros en la consulta fallará  cuando se  carguen en el formato <code>node --experimental-modules index.mjs?someURLInfo=5</code> (es tratado como un archivo en lugar de una URL en este contexto).</p>

<p>Tal argumento específico del archivo podria ser complementario al  usado en toda la aplicacion  <code>location.href</code> (con consultas strings o hash añadidas despues de la ruta HTML) (o en Node.js, mediante <code>process.argv</code>).</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificaciones</th>
  </tr>
  <tr>
   <td><code><a href="https://tc39.es/proposal-import-meta/#prod-ImportMeta">import.meta</a></code> proposal</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "webappapis.html#hostgetimportmetaproperties", "import.meta")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("javascript.statements.import_meta")}}</p>

<h3 id="Implementation_Progress">Implementation Progress</h3>

<p>La siguiente tabla provee el estatus de implementación diaria para esta caracteristica, porque esta caracteristica aun no ha alcanzado la estabilidad entre navegadores. La información es generada corriendo los test relevantes de la caracteristica en <a href="https://github.com/tc39/test262">Test262</a>, la suite estandar de test de JavaScript, en el build nocturno,  o en el último release de cada  motor de los browser de JavaScript.</p>

<div>{{EmbedTest262ReportResultsTable("import.meta")}}</div>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li>{{JSxRef("Statements/import", "import")}}</li>
 <li>{{JSxRef("Statements/export", "export")}}</li>
</ul>