在一个电子工程中使用无webpack打字稿的摩纳哥编辑

Question

我试图在一个电子打字项目中使用摩纳哥-编辑。我是通过npm install -D monaco-editor安装的。我用import { editor } from "monaco-editor";导入它--我的IDE (WebStorm)不会抱怨某个未找到的模块，但是在运行该应用程序之后，我得到了以下错误:控制台中的internal/modules/cjs/loader.js:801中的Uncaught Error: Cannot find module 'monaco-editor'。

我已经试过了

• 手工下载软件包
• 重新安装模块
• 从官方存储库克隆代码

我能够运行官方样品，但是那些使用纯javascript的。我也不使用WebPack。我认为这不应该有什么区别，但它是用于所有入门和安装指南。

该错误的来源是什么，我如何修复它？

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

Answer 1

我设法让它运转起来了。因此，对于那些试图：

tsconfig.json试图使类型记录编译器忽略摩纳哥库中的错误。

  "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} />