在电子项目中使用没有 webpack 的 monaco-editor 和 typescript

Question

我正在尝试在电子打字稿项目中使用monaco-editor。我通过安装它 npm install -D monaco-editor。 我用import { editor } from "monaco-editor"; 导入它我的IDE（WebStorm）没有抱怨找不到模块，但是在运行应用程序后我收到以下错误： Uncaught Error: Cannot find module 'monaco-editor' 来自控制台中的internal/modules/cjs/loader.js:801。

我已经试过了

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

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

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

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

Answer 1

我设法让它工作。 所以对于那些尝试的人：

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

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

rollup.config.js 使捆绑器接受导入 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} />