tl;干

手动将以下行添加到config/importmap.rb中，而不是使用

pin 'monaco-editor', to: 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

字符串
如果你正在使用刺激，你可以得到一个简单的摩纳哥编辑器，并像这样运行

import { Controller } from "@hotwired/stimulus"
import * as monaco from 'monaco-editor'

export default class extends Controller {
  connect() {
    monaco.editor.create(this.element)
  }
}

型

为什么importmaps命令不能正常工作？

importmaps依赖于纯esm模块，浏览器可以直接解释而不需要编译器。但是monaco-editor项目在他们的esm发行版中使用import './actionbar.css';语法。由于这还没有在JavaScript标准中，因此目前没有浏览器支持该语法（至少在2023年检查WICG proposal和webkits position的更新）。因此，importmaps命令也会失败，因为底层API在阅读这些行时会出现JavaScript错误。错误：

{"error":"Error: \n  \tfont-display: block;\n> \tsrc: url(./codicon.ttf) format(\"truetype\");\n                                              ^\n  }\n\nError parsing https://ga.jspm.io/npm:[email protected]/esm/vs/base/browser/ui/codicons/codicon/codicon.css:9:45"}

{"error":"Error: Module not found: https://cdn.jsdelivr.net/npm/[email protected]/esm/vs/basic-languages/monaco.contribution imported from https://cdn.jsdelivr.net/npm/[email protected]/esm/vs/editor/editor.main.js"}

的字符串
你也可以自己检查一下，如果这仍然抛出一个错误，也许有一天JavaScript标准会被扩展，或者微软会调整他们的npm包，使其开箱即用。

修复

@steventrouble posted下面的代码片段，带有指向工作的esm模块的cdn url

<script type="module">
  import * as monaco from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';

  monaco.editor.create(document.querySelector('.monaco'));
</script>
<div class="monaco" style="min-height: 100px"></div>

型
遗憾的是+esm cdn链接仍然为试图加载微软自己字体的css提供服务。

GET http://localhost:3000/codicon.ttf net::ERR_ABORTED 404 (Not Found)

型
Rails控制台会显示

ActionController::RoutingError (No route matches [GET] "/codicon.ttf"):

型
这不是太好。但编辑器仍然工作正常，字体对我来说也很好。但无论如何，我想出了一个丑陋的黑客也摆脱了这个问题。这将是添加以下行到config/routes.rb文件

get 'codicon.ttf', to: redirect('https://cdn.jsdelivr.net/npm/[email protected]/esm/vs/base/browser/ui/codicons/codicon/codicon.ttf')

型