ES6 模塊如何取得自身 URL？

模塊化的時候有這樣一個問題。
通過自定義元素自制了一個滑塊，其中 Shadow DOM 的 CSS 通過 @import 載入了一個外部的樣式表。就需要知道 URL。大概這樣：

// slider.js

const styleURL = "slider.css";

class SliderDiscrete extends HTMLElement {
    constructor () {
        super();

        const shadow = this.attachShadow({mode: 'open'});

        const style = document.createElement('style');
        style.innerText = `@import url(${styleURL})`;
        shadow.appendChild(style);
        ...
    }
    ...
}

export default SliderDiscrete;

// main.js

// Custom Element
import SliderDiscrete from './Components/slider/slider.js';
customElements.define('slider-discrete', SliderDiscrete);

我把 .css 和 .js 放在一起了。因為這樣看起來好像合理一些。然后，如果 main.js 不傳參，或者我自己不把路徑寫進去，slider.js 里的 SliderDiscrete 是不是就沒有辦法設(shè) URL 了呢？

不是。網(wǎng)上變來的奇技淫巧有，搞一個 Error 對象。

const getFunctionLocation = function pathToTheScript() {
    const error = 0;
    const rgx = /(?:http|https|file):\/\/.*?\/.+?.js/;
    try {
        error.foo();
    } catch (e) {
        return rgx.exec(e.stack)[0];
    }
}

getFunctionLocation(); // "http://127.0.0.1/Components/slider/slider.js"

Chrome 在 Function 里面，有一個 [[FunctionLocation]]，不知道能不能直接 / 間接獲取。

現(xiàn)在是 2018 年了。ES9 都得學(xué)了。有什么新方法嗎？

Stack Overflow 上的此類問題：

How to get the file-path of the currently executing javascript code
What is my script src URL?
JavaScript - How do I get the URL of script being called?
How to get the absolute path of the current javascript file name

回答

編輯回答

法克魷

你的css肯定是放你自己的網(wǎng)站里的吧，你的域名你自己是知道的吧，不知道就用location.hostname獲取，然后加上你自己的路徑不就行了嗎

2017年4月9日 01:29

編輯回答

乞許

寫 Web Components 可以用 https://web-cell.tk/ ，語法更簡潔合理～

2017年11月28日 14:04

編輯回答

墨小白

嗯。ES6 get path of module inside module Stack Overflow 上早有了解答，之前不知道為什么漏掉了，。

好久不登 SF 今天登了重新看了一下搜了一下，17 年就有個 Stage 3 的提案，Chrome 64+ 已經(jīng)支持。

module 內(nèi)通過 import.meta 可獲得一個含且僅含當(dāng)前腳本 URL 的對象。

// slider.js
> import.meta
< {url: "http://127.0.0.1/Components/slider/slider.js"}

是十分完美 ????乛?乛????

2018年1月28日 04:15

編輯回答

伴謊

對于非異步加載的 <script> 標(biāo)簽可以取到 src 的內(nèi)容，配合當(dāng)前頁面的 window.location.pathname 可以得到 URL。但是 import 加載的……還真不清楚。一般確實需要 url 的會，我會把模塊做成一個工廠方法，把通過其它方式取得的 url 傳進去，用于計算。

既然已經(jīng)發(fā)現(xiàn)了使用 Error 的方法可以獲得，那就封裝一下這個方法，讓它只執(zhí)行一次，減少開銷就好，反正再多次 URL 也不會變。

2018年1月3日 07:43