在webpack中使用monaco-editor

2023-11-10 18:12:28

前言

我查过网上的教程，大部分都是基于vue或者react框架，很少有教程是基于纯粹的webpack来的，这篇文章记录我在webpack上使用monaco-editor的过程，以补充网上在这方面资料的缺失。本文章会根据我的开发随时进行更新。

使用

monaco的使用介绍，网上有很多，大家可以参考这篇文章进行大概的了解。

点击跳转

自己总结的使用过程

1、安装。

npm install monaco-editor -save

2、在页面中使用

在HTML中创建一个容器，然后使用下面的代码进行初始化就可以得到一个在线编辑器了，但是现在这个编辑器也只是编辑器，什么辅助功能都没有，比如代码提示、右键菜单等等。

  1.   import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
  2.   const monacoInstance=monaco.editor.create(document.getElementById("monaco"),{
  3.   value:`console.log("hello,world")`,
  4.   language:"javascript"
  5.   })

效果图：

在webpack中使用monaco-editor

3、开启辅助功能

如何开启辅助功能，一种是我们根据自己的需要把辅助的文件引入到页面中，方法参考【使用】章节里提供的地址，另外一种就是用webpack来实现。

安装monaco-editor-webpack-plugin这个模块。

npm install monaco-editor-webpack-plugin

在webpack.config.js中进行配置，MonacoWebpackPlugin可以接受language和features来配置辅助功能，具体配置参数可以查看npm官网即可。

  1.   const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
  2.   module.exports = {
  3.   ...
  4.   plugins: [
  5.   new MonacoWebpackPlugin()
  6.   ]
  7.   }

效果图如下：

在webpack中使用monaco-editor

在webpack中使用monaco-editor

不过这里有几点注意的，这是博主在使用过程中发现的一些情况：

1)、如果你得webpack项目使用了HtmlWebpackPlugin来实现多页面配置，那么通过monaco-editor-webpack-plugin生成的一些文件的引用路径将会受到HtmlWebpackPlugin这个配置的影响。例如我使用如下代码动态配置HTML模板的信息，其中filename不仅可以从命名文件还可以设置其路径，假设我将filename改为`pages/${name}.html`，将HTML文件放在pages这个路径下，那么monaco-editor-webpack-plugin生成的所有文件在引用的时候都会加上pages这个路径，原因未知，博主排查了好久都不清楚为啥，所以只能放在根目录下。如果有知道的欢迎指出。

  1.   var getHtmlConfig = function(name,chunks){
  2.   return {
  3.   template:`./src/app/pages/${name}.html`,
  4.   filename:`${name}.html`,
  5.   inject:true, // 将js资源插入到body元素底部
  6.   hash:false,
  7.   chunks:[name, 'runtime','libs', 'commons']
  8.   }
  9.   }

2)、monaco-editor-webpack-plugin参数中filename仅更改worker文件的名字，而无法更改其他生成的JS文件名称。

3)、MonacoWebpackPlugin的language参数的配置会影响右键菜单。经测试：如果language中如果没有引入typescript，右键菜单和控制面板部分功能将消失。

4、如何设置菜单中文显示效果

这个功能折腾了楼主好久时间。网上也没有系统的相关资料。不过能在一些文章中零星的看到有人使用下面的代码进行配置。

  1.   require.config({
  2.   'vs/nls': {
  3.   availableLanguages: {
  4.   '*': 'zh-cn'
  5.   }
  6.   }
  7.   });

可是当你把这段代码复制到自己的代码中又发现完全无法执行。那怎么办？

这里需要涉及到另外两个模块。monaco-editor-esm-webpack-plugin和monaco-editor-nls。其中monaco-editor-esm-webpack-plugin和上面的monaco-editor-webpack-plugin这个不一样，前者需要依赖后者，也就是说你要使用前者，就必须先安装后者。先安装两个模块。

  1.   npm install --save monaco-editor-nls
  2.   npm install --save-dev monaco-editor-esm-webpack-plugin

改写webpack.config.js，需要注意的是rules里也需要添加MonacoWebpackPlugin.loader

  1.   // 去除monaco-editor-webpack-plugin，改为monaco-editor-esm-webpack-plugin
  2.    
  3.   const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
  4.   module.exports = {
  5.   module: {
  6.   rules: [
  7.   {
  8.   test: /\.js/,
  9.   enforce: 'pre',
  10.   include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
  11.   use: MonacoWebpackPlugin.loader
  12.   },
  13.   ]
  14.   }
  15.   plugins: [
  16.   new MonacoWebpackPlugin()
  17.   ]
  18.   }

然后在页面的JS中添加如下代码，这些代码必须添加在引入'monaco-editor/esm/vs/editor/editor.api.js';之前

  1.   import { setLocaleData } from 'monaco-editor-nls';
  2.   import zh_CN from 'monaco-editor-nls/locale/zh-hans';
  3.    
  4.   setLocaleData(zh_CN);

接着重新编辑文件，你会发现编译控制台提示报错，在monaco-editor/esm/vs/editor/contrib下缺少goToDefinition文件夹。其实还缺少了一个referenceSearch。如何解决？首先说明一下，这两个文件夹其实并没有缺少，只是在monaco-editor@0.19.0版本以上，微软把这些文件统一放到了gotoSymbol这个文件夹，你可以把monaco-editor安装为0.18.1这个版本就可以使用，不过还是得进行一些插件源代码修改。如果我一定要安装@0.20.0怎么办，那只需要修改\node_modules\monaco-editor-esm-webpack-plugin\node_modules\monaco-editor-webpack-plugin\features.js这个文件即可。

  1.   // 删除一下代码
  2.   goToDefinitionCommands: {
  3.   entry: 'vs/editor/contrib/goToDefinition/goToDefinitionCommands',
  4.   worker: undefined,
  5.   },
  6.   goToDefinitionMouse: {
  7.   entry: 'vs/editor/contrib/goToDefinition/goToDefinitionMouse',
  8.   worker: undefined,
  9.   },
  10.   referenceSearch: {
  11.   entry: [
  12.   'vs/editor/contrib/referenceSearch/referenceSearch',
  13.   'vs/editor/standalone/browser/referenceSearch/standaloneReferenceSearch',
  14.   ],
  15.   worker: undefined,
  16.   }
  17.    
  18.   // 新增以下代码
  19.   gotoSymbol:{
  20.   entry: 'vs/editor/contrib/gotoSymbol/goToCommands',
  21.   worker: undefined
  22.   }

按照上述操作修改后就可以正常编译了。可是编译后，你打开项目你会发现菜单什么还是英文的。这又是啥子情况，明明都按照要求更改了。这个问题我也不清楚是为啥，不过按照下面的改法就行。在一开始我们引入editor.api.js的时候是使用import进行引入的，只要把它改为require引入就行。

  1.   const monaco = require('monaco-editor/esm/vs/editor/editor.api');
  2.   // import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
  3.    
  4.   const monacoInstance = monaco.editor.create(document.getElementById("monaco"),{
  5.   value: `console.log(123)`,
  6.   contextmenu: true,
  7.   language: 'javascript',
  8.   theme: 'vs-dark'
  9.   })

到此菜单汉化就完成了，重新打包运行后效果如下：

在webpack中使用monaco-editor

在webpack中使用monaco-editor

 

5、编辑器功能(更新：2020年8月24日)

 1）、动态赋值

  1.   monacoInstance = monaco.editor.create(document.getElementById("monaco"),{
  2.   value: ``,
  3.   contextmenu: true,
  4.   language: 'javascript',
  5.   theme: 'vs-dark'
  6.   })
  7.   monacoInstance.setValue(res);

2）、动态修改语言

  1.   monaco.editor.setModelLanguage(monacoInstance.getModel(), 'html');
  2.   monaco.editor.setModelLanguage(monacoInstance.getModel(), 'javascript');

3）、获取光标位置

  1.   monacoInstance.getPosition();
  2.   // 返回参数
  3.   // lineNumber 行数
  4.   // column 列数

4）、设置光标位置。

  1.   // 两个参数最好都写，不然控制台会报错
  2.   monacoInstance.setPosition({
  3.   lineNumber: 115,
  4.   column: 1
  5.   })

5）、聚焦编辑器

monacoInstance.focus();

6）、编辑器滚动到顶部

  1.   monacoInstance.setScrollPosition({
  2.   scrollTop: 0,
  3.   scrollLeft: 0
  4.   });

7）、获取当前编辑器内容行数

monacoInstance.getModel().getLineCount()

8）、获取某一行的列数

monacoInstance.getModel().getLineLength(2)

 9）、在特定行插入数据

  1.   function insertValueByCurrentPosition(value) {
  2.   var p = monacoInstance.getPosition();
  3.   monacoInstance.executeEdits("",
  4.   [
  5.   {
  6.   range: new monaco.Range(p.lineNumber,
  7.   p.column,
  8.   p.lineNumber,
  9.   p.column),
  10.   text: value
  11.   }
  12.   ]
  13.   );
  14.   }

6、monaco-editor使用到的JS文件如何压缩(2020年4月28日11:49:58)

我们在webpack中使用到压缩JS模块一般都是使用uglifyjs-webpack-plugin。如果我们在项目中使用了monaco-editor的话，在使用uglifyjs-webpack-plugin压缩editor需要的JS的时候，你会发现控制台输出错误信息，会出现两种错误提示，一种是关于worker.js相关的错误，一个是Unexpected token: name «__insane_func», expected: punc «;»。上面两个错误本质上都是因为monaco-editor中使用了最新的ESM语法，uglifyjs-webpack-plugin无法正常解析导致的。处理办法有两种：

1）、继续使用uglifyjs-webpack-plugin。在exclude参数中添加worker.js，然后在chunkFilter中去除提示Unexpected token: name «__insane_func», expected: punc «;»错误的文件。不对这些文件进行压缩就可以正常编译。

  1.   module.exports = {
  2.   optimization: {
  3.   minimizer: [
  4.   new UglifyJSPlugin({ //目的是为了编译环境清除控制台以及关闭注释
  5.   exclude: /\.min\.js|\.worker\.js|\/libs-bundle$/,
  6.   cache: true,
  7.   parallel: true, // 开启并行压缩，充分利用cpu
  8.   extractComments: false, // 移除注释
  9.   chunkFilter: (chunk) => { // 需要加上这个，不然monaco-editor采用新的es语法，uglify无法解析
  10.   if (chunk.name == 'libs') {
  11.   return false;
  12.   }
  13.   return true
  14.   },
  15.   uglifyOptions: {
  16.   output: {
  17.   comments: false // 保留所有的注释
  18.   },
  19.   compress: {
  20.   drop_debugger: true,
  21.   drop_console: true // 删除所有的 `console` 语句，可以兼容ie浏览器
  22.   }
  23.   }
  24.   }),
  25.   ]
  26.   }
  27.   }

2）、不是用uglifyjs-webpack-plugin，将该模块替换为terser-webpack-plugin。这两个插件参数和使用方法基本是一致，可以理解为后者是前者的升级版。参考资料：【传送门1、传送门2、传送门3】。下面给出我的配置代码。

  1.   module.exports = {
  2.   optimization: {
  3.   minimize: true,
  4.   minimizer: [
  5.   new TerserPlugin({ //目的是为了编译环境清除控制台以及关闭注释
  6.   exclude: /\.min\.js$/,
  7.   cache: true,
  8.   parallel: true, // 开启并行压缩，充分利用cpu
  9.   extractComments: false, // 移除注释
  10.   terserOptions: {
  11.   output: {
  12.   comments: false // 保留所有的注释
  13.   },
  14.   compress: {
  15.   drop_debugger: true,
  16.   drop_console: true // 删除所有的 `console` 语句，可以兼容ie浏览器
  17.   }
  18.   }
  19.   }),
  20.   ]
  21.   }
  22.   }

后记：2020年4月23日15:22:48  在使用这个编辑器过程中，博主前前后后折腾了好久，特别是那个莫名添加路径和汉化这两点上，花费了很多的时间。百度过谷歌过都没有找到解决方案。不过幸好，最终还是做到自己想要的效果了。在此感谢上述涉及的插件模块的开发者。

上一篇：如何解决SecureCRT无法选择Monaco等其他字体


下一篇：Noip模拟73 2021.10.10