Import tag là gì

WordPress   |   Hoi dap WordPress   |   Hỏi đáp WordPress   |   WordPress FAQ   |   Hoc WordPress   |   Su dung WordPress   |   Lap trinh WordPress |   Plugin WordPress   |   SEO WordPress   |   Thuat ngu WordPress   |  Huong dan su dung WordPress

The import.meta meta-property exposes context-specific metadata to a JavaScript module. It contains information about the module, such as the module's URL.

Syntax

import.meta

Value

The import.meta object is created by the host environment, as an extensible null-prototype object where all properties are writable, configurable, and enumerable. The spec doesn't specify any properties to be defined on it, but hosts usually implement the following property:

url

The full URL to the module, includes query parameters and/or hash (following the

<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
0 or
<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
1). In browsers, this is either the URL from which the script was obtained (for external scripts), or the URL of the containing document (for inline scripts). In Node.js, this is the file path (including the
<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
2 protocol).

Description

The import.meta syntax consists of the keyword

<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
4, a dot, and the identifier
<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
5. Because
<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
4 is a reserved word, not an identifier, this is not a property accessor, but a special expression syntax.

The import.meta meta-property is available in JavaScript modules; using import.meta outside of a module (including direct

<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
9 within a module) is a syntax error.

Examples

Passing query parameters

Using query parameters in the

<script type="module">
  import "./index.mjs?someURLInfo=5";
script>
4 specifier allows module-specific argument passing, which may be complementary to reading parameters from the application-wide
// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
1 (or on Node.js, through
// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
2). For example, with the following HTML:

<script type="module">
  import "./index.mjs?someURLInfo=5";
script>

The

// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
3 module is able to retrieve the
// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
4 parameter through import.meta:

// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5

The same applies when a module imports another:

// index.mjs
import "./index2.mjs?someURLInfo=5";

// index2.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5

The ES module implementation in Node.js supports resolving module specifiers containing query parameters (or the hash), as in the latter example. However, you cannot use queries or hashes when the module is specified through the CLI command (like

// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
6), because the CLI entrypoint uses a more CommonJS-like resolution mode, treating the path as a file path rather than a URL. To pass parameters to the entrypoint module, use CLI arguments and read them through
// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
2 instead (like
// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
8).

Getting current module's file path

In Node.js CommonJS modules, there's a

// index.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
9 variable that contains the absolute path to the folder containing current module, which is useful for resolving relative paths. However, ES modules cannot have contextual variables except for import.meta. Therefore, to get the current module's file path, you can use
// index.mjs
import "./index2.mjs?someURLInfo=5";

// index2.mjs
new URL(import.meta.url).searchParams.get("someURLInfo"); // 5
1.