ECMAScript中能否不通过本地真实文件路径动态导入JS模块？

一、能否导入非真实文件路径的模块？ #

ECMAScript标准本身不直接支持导入真实文件路径（相对、绝对、import map映射路径）之外的对象。JS运行时（浏览器、Node.js等）的默认模块解析逻辑依赖真实文件系统或预注册的解析规则，像memfs这类虚拟文件系统的路径不在默认识别范围内。

但可以通过自定义模块加载器实现这一需求：

• 浏览器环境：借助import.meta.resolve配合自定义fetch拦截（或Service Worker），捕获虚拟路径的请求并返回对应模块内容。不过浏览器原生模块加载器API受限，通常需要Vite等工具链提供的虚拟模块能力辅助。
• Node.js环境：利用Node.js的实验性自定义模块加载器API（通过--experimental-loader flag启用），重写模块解析和加载流程，让运行时能识别虚拟文件系统路径，并从memfs中读取对应代码作为模块加载。

举个Node.js结合memfs的简化示例：

// 自定义加载器 loader.mjs
import { createFsFromVolume, Volume } from 'memfs';
const volume = Volume.fromJSON({
  '/virtual-module.mjs': 'export const message = "Hello from virtual FS";'
});
const fs = createFsFromVolume(volume);

export async function load(url, context, nextLoad) {
  // 拦截虚拟路径请求
  if (url.startsWith('virtual:')) {
    const filePath = url.replace('virtual:', '/');
    const content = await fs.promises.readFile(filePath, 'utf8');
    return {
      format: 'module',
      source: content,
      shortCircuit: true
    };
  }
  return nextLoad(url, context);
}

启动时执行：node --experimental-loader ./loader.mjs app.mjs，在app.mjs中即可导入虚拟模块：

import { message } from 'virtual:/virtual-module.mjs';
console.log(message); // 输出: Hello from virtual FS

二、Node.js中原路径不可用时，加载文件内容为模块 #

当原文件路径无法访问，但已获取到文件内容时，可通过以下几种方式将内容作为标准ES模块加载：

1. 使用vm模块创建隔离上下文加载 #

Node.js的vm模块支持在隔离上下文中编译执行模块代码，保留模块的导出特性：

import { Module, createContext } from 'vm';
import { fileURLToPath } from 'url';

async function loadModuleFromContent(code) {
  const context = createContext({});
  const module = new Module(fileURLToPath(import.meta.url), module);
  module.context = context;
  
  // 编译模块代码
  await module.compileAsync(code, {
    filename: 'dynamic-module.mjs',
    format: 'module'
  });
  
  // 处理模块依赖（如需加载外部模块可自定义逻辑）
  await module.link(async (specifier) => await import(specifier));
  
  // 执行模块并获取导出
  await module.evaluate();
  return module.namespace;
}

// 使用示例
const code = 'export const num = 42; export function add(a,b) { return a+b; }';
const module = await loadModuleFromContent(code);
console.log(module.num); // 42
console.log(module.add(2, 3)); // 5

2. 临时写入文件后导入（简单但有IO开销） #

如果场景允许，可将内容写入临时文件，通过import()动态导入后删除文件：

import { writeFile, unlink } from 'fs/promises';
import { tmpdir } from 'os';
import { join } from 'path';

async function loadModuleFromContent(code) {
  const tmpPath = join(tmpdir(), `temp-module-${Date.now()}.mjs`);
  await writeFile(tmpPath, code);
  try {
    return await import(`file://${tmpPath}`);
  } finally {
    await unlink(tmpPath);
  }
}

这种方式实现简单，但存在磁盘IO开销，并发场景下可能出现临时文件冲突，仅适合简单场景。

3. 自定义加载器直接加载内容（更优雅） #

注册自定义协议（如content:），直接传递模块内容进行加载：

// loader.mjs
export async function load(url, context, nextLoad) {
  if (url.startsWith('content:')) {
    const code = decodeURIComponent(url.replace('content:', ''));
    return {
      format: 'module',
      source: code,
      shortCircuit: true
    };
  }
  return nextLoad(url, context);
}

启动时启用加载器，即可在代码中直接导入内容：

// app.mjs
const code = 'export const msg = "Loaded from content";';
const module = await import(`content:${encodeURIComponent(code)}`);
console.log(module.msg); // 输出: Loaded from content

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