node.js - 在 Electron 项目中使用不带 webpack 的带 typescript 的 Monaco Editor

Question

我正在尝试使用 monaco-editor在 Electron typescript 项目中。我通过安装它npm install -D monaco-editor。我使用 import { editor } from "monaco-editor"; 导入它 我的 IDE (WebStorm) 没有提示未找到的模块，但是在运行该应用程序后我收到以下错误: Uncaught Error :无法从控制台的 internal/modules/cjs/loader.js:801 中找到模块“monaco-editor”。

我已经试过了

• 手动下载包
• 重新安装模块
• 从官方仓库克隆代码

我能够运行 official samples ，但是那些使用纯javascript。我也不使用 WebPack。我想这不会有什么不同，但它用于所有入门和安装指南。

该错误的来源是什么，我该如何解决？

附言您可以在 github 上找到完整代码如果您需要更多上下文

Answer 1

我设法让它发挥作用。所以对于那些尝试的人:

tsconfig.json尝试让 typescript 编译器忽略 monaco 库中的错误。

  "compilerOptions": {
    "checkJs": false,
    "skipLibCheck": true,
  },

rollup.config.js使 bundler 接受导入 css 文件，同时添加行 inlineDynamicImports: true 修复编译。我还不确定影响是什么。

import rollupPluginCssOnly from 'rollup-plugin-css-only'

export default {
    input: 'src/main.ts',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/build/bundle.js',
        inlineDynamicImports: true
    },
    plugins: [
        rollupPluginCssOnly({
            output: 'public/build/extra.css'
        }),

html 页面我使用 svelte 但这可以很容易地转换为纯 html(例如使用 getDocumentById 来获取元素)。

<script lang="ts">
  import { onMount } from 'svelte'
  import './extra.css'
  import * as monaco from 'monaco-editor'
  var containerElt: HtmlDivElement
  onMount(() => {
    monaco.editor.create(containerElt, {
      value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join(
        '\n',
      ),
      language: 'javascript',
    })
  })
</script>

<style>
  div {
    width: 100%;
    height: 100%;
  }
</style>

<svelte:head />
<div bind:this={containerElt} />