浏览器中JavaScript条件导入自托管JS文件的语法错误解决方法

你遇到的解析错误是因为静态import语句必须放在文件顶层，不能嵌套在if这类代码块里。要实现自托管文件的条件加载，继续用你之前CDN方式的核心逻辑——动态import()即可，它是函数调用，可以放在任意代码位置。

第一步：修正自托管文件的导出错误 #

你的pwacompact.js里函数名和导出名不匹配，会导致后续调用失败，先把这个改对：

// pwacompact.js
function logpwacompact() {
     console.log("pwacompact");
}
export { logpwacompact }; // 导出的名字要和函数名一致
// 此处添加你需要的其他代码...

或者保持函数名为pwacompact，导出对应名字：

// pwacompact.js
function pwacompact() {
     console.log("pwacompact");
}
export { pwacompact };
// 此处添加你需要的其他代码...

第二步：用动态import()实现条件加载 #

动态import()返回一个Promise，你可以通过两种方式处理：

方式1：使用.then()链式调用

直接在条件判断里调用动态import，加载完成后执行函数：

// main.js
// ... 条件导入前的其他函数代码

if (('standalone' in navigator) && (!navigator.standalone)) {
  // 注意路径要和你的文件实际位置匹配，比如同一目录用./pwacompact.min.js
  import('./pwacompact.min.js')
    .then(module => {
      module.logpwacompact(); // 调用的名字要和导出的一致
    })
    .catch(err => {
      console.error('加载pwacompact文件失败:', err);
    });
}

方式2：使用async/await（更简洁）

把逻辑包裹在异步函数里，代码可读性更好：

// main.js
// ... 条件导入前的其他函数代码

async function loadPwaCompat() {
  if (('standalone' in navigator) && (!navigator.standalone)) {
    try {
      const module = await import('./pwacompact.min.js');
      module.logpwacompact();
    } catch (err) {
      console.error('加载pwacompact文件失败:', err);
    }
  }
}

// 执行这个异步函数
loadPwaCompat();

关键注意点 #

• 路径要正确：根据main.js和pwacompact.min.js的实际位置调整相对路径，比如文件在子目录就写./libs/pwacompact.min.js
• 导出和调用的名字必须完全一致，否则会出现函数未定义的错误
• 动态import()支持所有现代浏览器，无需额外配置即可使用

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