获取当前模块脚本的URL

Question

我还没有在HTML spec或网络上的任何地方找到任何提及，说这是可能的，我仍然会问以防万一。

是否可以获取模块的URL以获取相对于该URL的文件？

让我们说index.html有一个：

<script type="module">import '/foo/foo.js'</script>

和foo.js想知道它自己的网址是动态加载某些文件，例如./file-inside-foo。

截至撰写本文时document.currentScript在模块内部返回null并且可能与设计相似？

Answer 1

HTML Living Standard当前包含Stage 3 Proposal到实现ECMA-262 Standard的import.meta的URL，它公开了名为url的属性，提供了当前模块的完整路径，包括协议和文件名。

// import.meta.url == 'http://your.domain.name/path/to/your/module.js'

要获取不带协议+域的当前模块的路径，您可以根据此值构造implemented in v64 of Google Chrome对象并访问其.pathname属性：

const modulePath = new URL(import.meta.url).pathname;
// modulePath = '/path/to/your/module.js'

要确定当前模块所在的目录，您可以使用./作为import.meta.url参数为相对路径base构造一个URL对象：

const moduleDir = new URL('./', import.meta.url).pathname;
// moduleDir == '/path/to/your/'

您还可以以相同的方式获取相对于当前模块的任何文件的路径。例如：

let img = new Image();
image.src = new URL('../icons/glyph.png', import.meta.url).pathname;
// image.src == '/path/to/icons/glyph.png'

不幸的是，import.meta可能并非在所有浏览器中都可用，但是它是this。

Answer 2

ECMA-262具有用于实现import.meta的{​​{3}}。在网络上，它公开了一个名为url的属性，当从模块内部访问该属性时，可以访问该模块的完整URL。

// in /path/to/your/module.js

const { pathname } = new URL(import.meta.url);
console.log(pathname); // '/path/to/your/module.js'

您还可以使用URL构造函数的第二个参数在此处跳过步骤：

const url = new URL('relative/file.js', import.meta.url);

不幸的是，Stage 3 Proposal可能并非在所有浏览器中都可用，但import.meta才可用。