如何在浏览器ES6模块中导入非模块变量？

问题场景 #

场景1：全局变量污染问题 #

现有外部JS库feature.js，里面定义了全局变量Feature，常规引入会污染全局作用域。尝试直接在ES6模块里导入该文件后，却访问不到Feature变量，想知道能不能通过ES6模块导入该变量来避免全局污染？

场景2：UMD库的全局exports污染问题 #

实际用的库带UMD语句：

"undefined"!=typeof exports&&(exports.Gmail=Gmail)

用下面的方案会导致全局出现exports变量，想问这个方案行不行，有没有更优的方式只在模块内使用？

(globalThis as any).exports ??= {};

// @ts-ignore
await import("/libs/jquery.min.js");
// @ts-ignore
await import("/libs/gmail.min.js");

const Gmail = (globalThis as any).exports.Gmail;

解决方案 #

针对场景1：全局变量库的模块式导入 #

直接导入非模块化的feature.js拿不到Feature变量，是因为这个库没用到ES6模块的导出语法。要在ES6模块里隔离全局变量，可以用动态导入+沙箱环境的方式：

• 建一个临时iframe当沙箱，在iframe里加载feature.js，然后从iframe的window里提取Feature变量，最后删掉iframe。示例代码：

async function getFeature() {
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);
  
  // 在沙箱里加载脚本
  const script = iframe.contentWindow.document.createElement('script');
  script.src = '/libs/feature.js';
  await new Promise(resolve => script.onload = resolve);
  
  // 获取目标变量
  const Feature = iframe.contentWindow.Feature;
  // 清理沙箱
  document.body.removeChild(iframe);
  
  return Feature;
}

// 使用示例
const Feature = await getFeature();

这种方式完全隔离全局作用域，不会污染主页面的全局变量。

针对场景2：UMD库的无全局污染方案 #

你当前的方案会在全局创建exports变量，有污染风险，不可行。更优的方式是利用ES模块的模块作用域，创建局部的exports对象，而不是挂载到globalThis：

• 用模块内的局部对象模拟CommonJS的exports环境，让UMD库把变量挂载到局部对象上，而非全局。示例代码：

// 创建局部exports对象，替代全局的exports
const localExports = {};
// 保存原本的全局exports（如果有的话）
const originalExports = globalThis.exports;

try {
  // 临时把全局exports指向局部对象
  (globalThis as any).exports = localExports;
  
  // 加载UMD库
  await import("/libs/jquery.min.js");
  await import("/libs/gmail.min.js");
  
  // 从局部exports里拿Gmail
  const Gmail = localExports.Gmail;
  // 这里就能正常用Gmail了
} finally {
  // 恢复原来的全局exports，避免污染
  (globalThis as any).exports = originalExports;
}

这种方式只在加载库的短暂时间里临时替换全局exports，加载完立刻恢复，不会留下全局污染，同时能在模块内拿到UMD导出的变量。

另外，如果用了Webpack、Vite这类构建工具，也可以通过配置工具的shimming功能来更优雅地处理这类非模块化库，比如Webpack的ProvidePlugin或者Vite的optimizeDeps配置，直接把全局变量转成模块导出。

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