Rails 7使用Importmap引入monaco-editor失败求助

monaco-editor的包结构比较特殊，直接用./bin/importmap pin命令没法正常识别，你可以按以下步骤手动配置：

• 手动添加映射到importmap.rb
  打开config/importmap.rb，添加指定版本的CDN路径映射（可以替换成你需要的版本号）：

  pin "monaco-editor", to: "https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/editor/editor.main.js"
  pin "monaco-editor/css", to: "https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/editor/editor.main.css"
  

• 在JS中导入并初始化编辑器
  打开app/javascript/application.js，添加导入和初始化代码：

  // 先加载编辑器样式
  import "monaco-editor/css"
  // 导入monaco核心模块
  import * as monaco from "monaco-editor"
  
  // 页面加载完成后初始化编辑器
  document.addEventListener('DOMContentLoaded', () => {
    const editorEl = document.getElementById('editor')
    if (editorEl) {
      monaco.editor.create(editorEl, {
        value: '// 开始编写你的代码',
        language: 'javascript',
        theme: 'vs-dark'
      })
    }
  })
  

• 在视图中添加编辑器容器
  在你需要显示编辑器的erb视图文件里，添加一个带ID的容器元素：

  <div id="editor" style="width: 800px; height: 600px;"></div>
  

这样配置后，启动Rails服务器就能正常加载并显示monaco编辑器了。

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