1. 初步解决,使用monaco-editor-webpack-plugin(https://github.com/Microsoft/monaco-editor-webpack-plugin)进行打包配置(在webpack.base.conf.js进行配置) newMonacoWebpackPlugin({ languages:['sql','json'], output:'./static/js/monaco-editor'}) 这样文件相对整洁一些,而且我只是用了editor的sql和json,...
这边默认会加载一个editor.worker.js,这是一个基础功能文件,提供了所有语言通用的功能(例如已定义常量的代码补全提示),无论使用什么语言,monaco都会去加载他。 2. 打包worker 在webpack中引入需要的worker entry:{"main":path.resolve(process.cwd(),"src/main.js"),"editor.worker":'monaco-editor/esm/vs/edi...
采用import * as monaco from 'monaco-editor';这种方式引入的话,会自动带上所有的内置语言和控件,唯一的缺点就是包的体积过大。 看了下 webpack 打包出了所有的 chunk js,这些语言是我们不需要的,我们只需要加载所需要的语言 JS 就可以了,因此需要优化 js 文件大小。 优化包大小 需要将全部引入的方式替换为...
在Vue 3项目中,你可以在一个单独的组件中引入并使用Monaco Editor。但是,由于Monaco Editor的体积较大,我们通常会在项目的入口文件(如main.js或main.ts)中进行一些全局配置,以减少打包后的体积。 在main.js或main.ts中,你可以这样引入Monaco Editor的worker文件(这是为了支持语言特性,如代码折叠、智能提示等): ja...
其次需要在 webpack 中配置 worker 文件的打包入口,因为是 web worker ,所以输出的globalObject的类型应该是self module.exports= {mode:'development',entry: {app:'./index.js','editor.worker':'monaco-editor/esm/vs/editor/editor.worker.js','json.worker':'monaco-editor/esm/vs/language/json/json.wor...
看网上的教程需要添加vite配置,但是我的项目没有对vite进行配置,打包出来的也是可以用的,具体看你们的场景 vite.config.js配置 安装vite-plugin-monaco-editorimport monacoEditorPlugin from 'vite-plugin-monaco-editor' plugins: [ monacoEditorPlugin({
"monaco-editor/loader": "^1.3.2" "node": "v14.15.4" "webpack": "v4.28.4" 小结 monaco-editor/loader会自动处理配置和加载monaco源码,并且它的使用方式与项目打包方式解耦,只需在需要使用的文件中引入即可。使用方式灵活,适用范围更加广阔。
* fix: 修复preview生产打包的时候repl引入的monaco-editor里的worker跨域报错 * feat(design-core/preview): 预览增加调试按钮来打开vue-repl编辑模式,并实现编辑器懒加载 * fix(design-core/preview): 修复repl-patch引入脚本路径模块化不支持importScripts问题 develop(opentiny/tiny-engine#245) 1 parent 96def94...
到此菜单汉化就完成了,重新打包运行后效果如下: 5、编辑器功能(更新:2020年8月24日) 1)、动态赋值 monacoInstance = monaco.editor.create(document.getElementById("monaco"),{ value: ``, contextmenu: true, language: 'javascript', theme: 'vs-dark' ...
看网上的教程需要添加vite配置,但是我的项目没有对vite进行配置,打包出来的也是可以用的,具体看你们的场景 vite.config.js配置 安装vite-plugin-monaco-editor importmonacoEditorPluginfrom'vite-plugin-monaco-editor'plugins: [monacoEditorPlugin({languageWorkers: ['editorWorkerService','typescript','json','html...