ES6 模块如何取得自身 URL？

Question

模块化的时候有这样一个问题。通过自定义元素自制了一个滑块，其中 Shadow DOM 的 CSS 通过 @import 载入了一个外部的样式表。就需要知道 URL。大概这样：// slider.jsconst 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 Elementimport SliderDiscrete from './Components/slider/slider.js';customElements.define('slider-discrete', SliderDiscrete);我把 .css 和 .js 放在一起了。因为这样看起来好像合理一些。然后，如果 main.js 不传参，或者我自己不把路径写进去，slider.js 里的 SliderDiscrete 是不是就没有办法设 URL 了呢？不是。网上变来的奇技淫巧有，搞一个 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]]，不知道能不能 直接 / 间接 获取。现在是 2018 年了。ES9 都得学了。有什么新方法吗？Stack Overflow 上的此类问题：How to get the file-path of the currently executing javascript codeWhat 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

Answer 1

你的css肯定是放你自己的网站里的吧，你的域名你自己是知道的吧，不知道就用location.hostname获取，然后加上你自己的路径不就行了吗

Answer 2

对于非异步加载的 <script> 标签可以取到 src 的内容，配合当前页面的 window.location.pathname 可以得到 URL。但是 import 加载的……还真不清楚。一般确实需要 url 的会，我会把模块做成一个工厂方法，把通过其它方式取得的 url 传进去，用于计算。

既然已经发现了使用 Error 的方法可以获得，那就封装一下这个方法，让它只执行一次，减少开销就好，反正再多次 URL 也不会变。