如何在普通JS脚本调用JS模块类及实现多模块异步导入

对于你提到的包含默认导出Mgrs和命名导出LatLon的模块，在普通脚本（type="text/javascript"）里可以通过动态import()函数实现异步导入，对应的const声明写法主要有两种：

1. 使用 async/await 语法（更直观） #

把导入逻辑放在异步函数里，通过解构赋值同时获取默认导出和命名导出：

async function loadGeodesyModule() {
  // 解构模块对象：default对应默认导出，LatLon对应命名导出
  const { default: Mgrs, LatLon } = await import('geodesy/mgrs.js');
  
  // 这里就可以正常使用Mgrs和LatLon了
  console.log(Mgrs, LatLon);
  
  // 如果需要全局可用，挂载到window对象
  window.Mgrs = Mgrs;
  window.LatLon = LatLon;
}

// 调用函数触发导入
loadGeodesyModule();

2. 使用 Promise.then() 语法 #

如果不想用async函数，也可以通过Promise链式调用处理：

import('geodesy/mgrs.js').then(module => {
  const Mgrs = module.default; // 默认导出取default属性
  const LatLon = module.LatLon; // 命名导出直接取对应属性
  
  // 使用或挂载到window
  window.Mgrs = Mgrs;
  window.LatLon = LatLon;
});

关键说明 #

• 动态import()返回的是一个Promise，resolve后得到的模块对象中：
  • 默认导出内容会放在module.default属性里
  • 所有命名导出的内容会作为模块对象的直接属性存在
• 如果需要在脚本全局作用域直接使用这些类，必须将它们挂载到window对象，否则只能在导入成功的回调/异步函数内部访问。

内容的提问来源于stack exchange，提问作者Krubkj lkjlökg