JavaScript跨域脚本动态导入问题及Parcel下优化方案问询

为什么直接用import(完整URL)报错？ #

这不是JavaScript本身的限制，核心原因是Parcel的打包机制。Parcel默认会把模块导入路径当作项目内资源解析、打包，不会直接保留原生跨域import语法。当你写import("https://xxx")时，Parcel会尝试在项目内查找对应模块，自然找不到，因此抛出Cannot find module错误。

动态创建type="module"的script标签是可行方案 #

完全可以通过动态创建模块脚本标签实现跨域加载+保留模块结构，这是原生支持的方案，不依赖打包工具的特殊处理。示例代码：

function loadRemoteModule(moduleUrl) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'module';
    script.src = moduleUrl;
    
    script.onload = () => {
      // 若远程模块用export导出内容，可在此处通过后续逻辑获取
      // 比如结合原生动态import，或让远程模块主动向全局暴露指定内容
      resolve();
    };
    script.onerror = (err) => reject(err);
    
    document.head.appendChild(script);
  });
}

替代eval的更优雅方案 #

要绕开Parcel的静态解析，保留原生动态import的能力，只需通过字符串拼接破坏Parcel对导入路径的静态识别即可，浏览器会执行原生跨域import：

const scriptUri = "https://your-remote-module-url.js";
// 简单拼接让Parcel无法识别为静态导入路径
const importPromise = import(`${scriptUri}`);
// 或用空字符串拼接
const importPromise = import(scriptUri + '');

这种方式既保留了原生动态import的Promise风格与模块结构，又避开了Parcel的打包限制，比eval更规范清晰。

注意事项 #

• 远程服务器必须配置CORS响应头（如Access-Control-Allow-Origin: *或你的域名），否则浏览器会因跨域策略阻止模块加载。
• 远程脚本必须是合法ES模块（使用export导出内容，避免不必要的全局变量污染）。

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