从 ES6 模块解析到绝对 url 的相对路径（在浏览器中）

Question

How to resolve relative path to absolute url in ES6 module (in browser)?

For example:

base-url.com/
    |-resolve
    |   |-resolveUrl.js
    |-dir
        |-dir1
            |-module1.js
        |-dir2
            |-module2.js

module1.js

import resolveUrl from "../../../resolve/resolveUrl.js"
resolveUrl("../dir2/module2.js") // return 'base-url.com/dir/dir2/module2.js'

What would be the resolveUrl implementation?

base-url.com/ may not be the web-site's domain. It can be a repo where only sources are stored.

Answer 1

🎉 You can now use to-absolute-url .

It uses stacktrace.js under the hoods to get the caller function's absolute path file:

Thanks to @PatrickRoberts for his idea to use stacktrace, and @jfriend00 for his tip to use URL object.

Answer 2

How about

const a = document.createElement('a')

function resolveUrl(path) {
  a.href = path
  return a.href // magic happens
}