从 sveltekit 中的 url 动态导入模块？

Question

我正在尝试从 $lib/location.js 文件中动态导入模块：

import { feature } from 'https://cdn.skypack.dev/topojson@3.0.2';
import { geoContains, geoCentroid, geoDistance } from 'https://cdn.skypack.dev/d3@7.0.0';
import { location as loc } from '$stores/user';

/*
    Created by Stefan Nieke, https://niekes.com
*/
async function success(position, fn) {
    const topology = await fetch(
        'https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json'
    ).then((response) => response.json());
    const geojson = feature(topology, topology.objects.countries);

    const { longitude, latitude } = position.coords;

    const location = geojson.features.filter((d) => geoContains(d, [longitude, latitude])).shift();

    if (location) {
        loc.set(location.properties.name);
        fn();
    }

    if (!location) {
        const closestCountry = geojson.features
            // You could improve the distance calculation so that you get a more accurate result
            .map((d) => ({ ...d, distance: geoDistance(geoCentroid(d), [longitude, latitude]) }))
            .sort((a, b) => a.distance - b.distance)
            .splice(0, 5);

        if (closestCountry.length > 0) {
            const possibleLocations = closestCountry.map((d) => d.properties.name);
            const suggestLocations = `${possibleLocations
                .slice(0, -1)
                .join(', ')} or ${possibleLocations.slice(-1)}`;

            loc.set(suggestLocations);
            fn();
        }

        if (closestCountry.length === 0) {
            error();
        }
    }
}

function error() {
    document.querySelector('#location').innerHTML = 'Sorry, I could not locate you';
}

function getLocation(fn) {
    navigator.geolocation.getCurrentPosition((position) => {
        success(position, fn);
    }, error);
}

export { getLocation };

构建时出现错误。它在开发中运行良好：

> Using @sveltejs/adapter-static
> Only file and data URLs are supported by the default ESM loader. Received protocol 'https:'
Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only file and data URLs are supported by the default ESM loader. Received protocol 'https:'
    at new NodeError (node:internal/errors:371:5)
    at throwIfUnsupportedURLProtocol (node:internal/modules/esm/resolve:998:11)
    at defaultResolve (node:internal/modules/esm/resolve:1072:3)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:79:40)
    at link (node:internal/modules/esm/module_job:78:36)

Answer 1

我必须使用 npm 安装。但是 topojson 已被弃用。不确定如何修复此库。

import { feature } from 'topojson';
import { geoContains, geoCentroid, geoDistance } from 'd3';
import { location as loc } from '$stores/user';

Answer 2

我在 nodejs 中没有看到对 url 的支持。如果你构建为 deno，它可能会起作用。检查 deno 适配器

从 sveltekit 中的 url 动态导入模块？

Dynamically import modules from urls in sveltekit?

svelte

sveltekit