如何在浏览器控制台动态查看JavaScript模块的导出符号

查看动态导入模块导出符号的方案 #

1. 代码遍历打印

修改你的动态导入逻辑，调用JS原生对象属性读取方法即可导出所有内容：

onMount(async () => {
    if (browser) {
        const module = await import('jquery');
        // 打印所有可枚举导出的名称
        console.log('可枚举导出键：', Object.keys(module));
        // 打印包含不可枚举属性在内的所有自有属性
        console.log('全部自有属性：', Object.getOwnPropertyNames(module));
        // 遍历打印所有导出的键值对
        Object.entries(module).forEach(([key, value]) => {
            console.log(`导出名 ${key}`, value);
        })
    }
})

2. 浏览器控制台直接查看

最新版Chrome、Firefox的开发者工具都原生支持展开ES模块对象，你直接执行console.log(module)后，点击输出的Module对象前的展开箭头，就能直接看到所有导出属性和对应值。如果你的控制台仅显示Symbol.toStringTag属性，将浏览器升级到最新版本即可。

module.default为undefined的问题解决 #

jQuery的npm包为UMD格式，SvelteKit基于Vite的构建链处理UMD模块的动态导入时，不会自动生成default导出，可直接用如下兼容写法获取jQuery实例：

const $ = module.default ?? module

内容的提问来源于stack exchange，提问作者Mikko Ohtamaa