MonacoEditor中JS库显式加载方案问询（适配GraalVM Truffle）

要在GraalVM Truffle执行的自定义环境里，让Monaco Editor支持JS脚本的显式import导入，可通过配置TypeScript服务的模块解析逻辑和自定义文件系统来实现，具体方案如下：

1. 配置编译器支持ES模块 #

先调整Monaco的TypeScript编译器选项，开启ES模块支持，确保import语法能被正确识别：

monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
  module: monaco.languages.typescript.ModuleKind.ESNext,
  moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeNext,
  target: monaco.languages.typescript.ScriptTarget.ESNext,
  allowSyntheticDefaultImports: true
});

2. 注册自定义远程资源加载逻辑 #

通过获取TypeScript Worker实例，替换默认文件系统，实现遇到import时自动从远程服务器拉取资源：

// 获取TypeScript Worker
monaco.languages.typescript.javascriptDefaults.getWorker()
  .then(workerPromise => {
    workerPromise.then(tsWorker => {
      // 自定义文件系统，处理远程资源读写
      const remoteFileSystem = {
        // 读取文件内容
        readFile: async (uri) => {
          // 判断是否为远程资源URI
          if (uri.startsWith('http://mylibrary.storage.uri/')) {
            const response = await fetch(uri);
            if (!response.ok) {
              throw new Error(`加载资源失败：${uri} (${response.statusText})`);
            }
            return response.text();
          }
          // 处理编辑器内已存在的模型文件
          const model = monaco.editor.getModel(monaco.Uri.parse(uri));
          return model ? model.getValue() : '';
        },
        // 检查文件是否存在
        fileExists: async (uri) => {
          if (uri.startsWith('http://mylibrary.storage.uri/')) {
            try {
              const response = await fetch(uri, { method: 'HEAD' });
              return response.ok;
            } catch {
              return false;
            }
          }
          return !!monaco.editor.getModel(monaco.Uri.parse(uri));
        }
      };

      // 配置Worker使用自定义文件系统
      tsWorker.configure({
        fileSystem: remoteFileSystem
      });
    });
  });

3. 测试显式导入 #

配置完成后，在Monaco Editor中编写如下代码，即可触发远程模块的加载：

import { Facts } from 'http://mylibrary.storage.uri/facts.js';

console.log(Facts.next());

4. 可选：添加类型提示支持 #

如果需要为远程模块提供类型补全，可在加载模块后动态注入类型定义文件：

// 加载并注入远程类型定义
fetch('http://mylibrary.storage.uri/facts.d.ts')
  .then(res => res.text())
  .then(typeSource => {
    const typeUri = 'http://mylibrary.storage.uri/facts.d.ts';
    monaco.languages.typescript.javascriptDefaults.addExtraLib(typeSource, typeUri);
    monaco.editor.createModel(typeSource, 'typescript', monaco.Uri.parse(typeUri));
  });

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