如何优雅导入无导出模块？以krpano插件为例

以下是几种无需修改原插件文件的优雅解决方案：

方法1：动态创建script标签加载（无构建工具依赖） #

通过在封装代码里动态生成script标签，完全模拟原生script引入的效果，让krpano.js自动把embedpano挂载到window对象：

// 封装文件 krpanoWrapper.js
export function loadKrpano() {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = '@/libs/krpano.js'; // 替换为你的实际文件路径
    script.onload = () => resolve(window.embedpano);
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// 业务代码中使用
import { loadKrpano } from './krpanoWrapper.js';
loadKrpano().then(embedpano => {
  embedpano({swf:"krpano.swf", xml:"pano.xml", target:"pano"});
});

方法2：用script-loader处理（Webpack项目） #

Webpack环境下可以借助script-loader，直接将krpano.js作为全局脚本执行，无需修改原文件：

1. 先安装依赖：

npm install script-loader --save-dev

2. 封装文件中导入并使用：

// 封装文件 krpanoWrapper.js
import 'script-loader!@/libs/krpano.js';

export function initKrpano(options) {
  window.embedpano(options);
}

// 业务代码中使用
import { initKrpano } from './krpanoWrapper.js';
initKrpano({swf:"krpano.swf", xml:"pano.xml", target:"pano"});

方法3：Vite项目使用?script后缀 #

Vite原生支持通过添加?script后缀，将脚本作为全局代码执行，自动挂载到window：

// 封装文件 krpanoWrapper.js
import '@/libs/krpano.js?script';

export const initKrpano = (options) => {
  window.embedpano(options);
};

// 业务代码中使用
import { initKrpano } from './krpanoWrapper.js';
initKrpano({swf:"krpano.swf", xml:"pano.xml", target:"pano"});

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