nonaco-editor/react 并没有将 monaco-editor 作为 peer 依赖,也没有把 monaco-editor 打包到源代码里。它采用的做法是通过 CDN 去加载打包好的 monaco-editor。 nonaco-editor/react 提供了 loader 方法,我们可以传递一个 config 方法,来指定 monaco 对象的来源。 它有
main 和 workers 采用 umd 机制打包,很好解决(官方默认提供的 amd 机制,就扔了吧,amd 实在很麻烦,文件散乱而繁杂)。 不过最麻烦的是 locale 多语言的处理,0.50.0 以前,monaco 基于 amd 机制,在对应 module 被加载时,借用 module id 比如 (vs/editor/xxx),来匹配 locale 对应的 key,以 amd 加载时,注入对...
monaco-editor不再提供任何其他办法可对 monaco-editor 进行多语言注入。 目前市面上的实现,多是借助 webpack/vite 的运行时进行注入,很多已年久失修,且会和最终打包的代码混合,无法分离。 这里借助 rollup 插件的机制,对此进行优化,合计只做了两件事: 对monaco-editor/esm/vs/nls.js进行 replace,替换为src/nls...
先说一下monaco。什么、monaco?好吧,我们换个名字,vscode浏览器端的线上Ide。强大得代码提示,统一的编码风格,的确让我觉得很。把ide植入我开发的可视化搭建ide的时候,我吐了,整整15Mb的包,webpack打包瞬间内存溢出,就算强行扩内存,整个打包过程也要持续个2-5分钟。 必须优化,说干就干。开始正文 webpack 引入ext...
看网上的教程需要添加vite配置,但是我的项目没有对vite进行配置,打包出来的也是可以用的,具体看你们的场景 vite.config.js配置 安装vite-plugin-monaco-editor importmonacoEditorPluginfrom'vite-plugin-monaco-editor'plugins: [monacoEditorPlugin({languageWorkers: ['editorWorkerService','typescript','json','html...
看了下 webpack 打包出了所有的 chunk js,这些语言是我们不需要的,我们只需要加载所需要的语言 JS 就可以了,因此需要优化 js 文件大小。 优化包大小 需要将全部引入的方式替换为编辑器的核心 api 代码语言:javascript 代码运行次数:0 运行 AI代码解释
// 等宽优化// emptySelectionClipboard: false, // 空选择剪切板// selectionClipboard: false, // 选择剪切板automaticLayout:true,// 自动布局codeLens:true,// 代码镜头// scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕colorDecorators:true// 颜色装饰器// accessibilitySupport: 'on', /...
看了下 webpack 打包出了所有的 chunk js,这些语言是我们不需要的,我们只需要加载所需要的语言JS就可以了,因此需要优化 js 文件大小。 优化包大小 需要将全部引入的方式替换为编辑器的核心 api -import*asmonacofrom'monaco-editor'; +import*asmonacofrom'monaco-editor/esm/vs/editor/editor.api'; ...
这可能涉及到下载和配置额外的语言服务文件。 另外,由于Monaco Editor的体积较大,你可能需要在实际项目中对其进行适当的打包和优化,以减少最终构建文件的大小。 以上就是在React项目中集成MonacoEditor以支持C#语言编辑的基本步骤和示例代码。希望这对你有所帮助!
接下来我们通过 monaco-editor 提供的一些 Language Services 来针对 SparkSQL 的语言进行优化。 本文旨在提供相关思路以及 Demo,不可将相关代码用于生产环境 高亮 constregex1 =/.../;constregex2 =/.../;constregex3 =/.../;constregex4 =/.../;// Register a new languagemonaco.languages.register({id...