如何使用monaco的部分方法而不整体引入？

[Gaojianli]

我想使用CDN的方式加载monaco：

import { loader } from '@guolao/vue-monaco-editor';
loader.config({
  paths: {
    vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs',
  },
})

但是由于配置语法检查需要用到monaco-editor里面的的部分枚举和setModelMarkers方法，直接import导致体积非常庞大：

import { MarkerSeverity, editor, type languages } from 'monaco-editor/esm/vs/editor/editor.api'

想问问有办法解决掉吗

代码在这里：https://github.com/PBH-BTN/PeerBanHelper/blob/script/webui/src/views/settings/components/script/index.vue#L70

[imguolao]

const handleMount = (_, monaco) => {
  console.log(monaco.MarkerSeverity)
}

所有导出都有绑定到 monaco 实例上，通过 monaco.xxx 访问就好，具体可以看下文档 https://microsoft.github.io/monaco-editor/docs.html#enums/MarkerSeverity.html

[Gaojianli]

感谢指导，目前枚举的问题解决了，但是如何使用里面的类型标注成了个麻烦的事情，只要我import monaco Editor，哪怕是type也会造成体积膨胀，我只能这样书写非常恶心的类型： 是我用法不太对吗？

[imguolao]

按理说类型会在转译为 js 时去掉才对，是不是打包有问题？

// types.ts
import * as monacoEditor from 'monaco-editor/esm/vs/editor/editor.api'

type MonacoEditorTypes = typeof monacoEditor

type EditorInstance = MonacoEditorTypes.editor.IStandaloneCodeEditor

[Gaojianli]

type MonacoEditorTypes = typeof monacoEditor

我试了一下你给的例子，似乎并不能工作，editor是个命名空间，MonacoEditorTypes下面并没有这个

[imguolao]

如果 (typeof monacoEditor)["editor"] 里没有 IStandaloneCodeEditor，就只能直接引用导出类型了。

我的代码里也是直接引用的类型，ts 转换为 js 后就没了。

https://github.com/imguolao/monaco-vue/blob/7c5d06b8dcf9f453c0085d2983f2f1372715df2a/packages/editor/src/components/Editor.ts#L15

[Gaojianli]

还是不行，麻了，是我vite配置有问题吗：https://github.com/PBH-BTN/PeerBanHelper/blob/master/webui/vite.config.ts

[imguolao]

还是不行，麻了，是我vite配置有问题吗：https://github.com/PBH-BTN/PeerBanHelper/blob/master/webui/vite.config.ts

这就不清楚了，你要查还挺麻烦的，得看 vite plugin 对 ts 文件的转换结果里是不是还引用着 monaco 导致 tree-shaking 处理不掉。

要不还是先丑陋的用着 Parameter 😂

[Gaojianli]

还是不行，麻了，是我vite配置有问题吗：https://github.com/PBH-BTN/PeerBanHelper/blob/master/webui/vite.config.ts

这就不清楚了，你要查还挺麻烦的，得看 vite plugin 对 ts 文件的转换结果里是不是还引用着 monaco 导致 tree-shaking 处理不掉。

要不还是先丑陋的用着 Parameter 😂

只能这样了。。