monaco-editor的使用，以及在webpack汉化

汉化

wabpack端需要额外引入 `monaco-editor-esm-webpack-plugin`，`monaco-editor-nls`，并且要在monaco之前，manaco要改成require的方式引入，不然右键菜单不生效。

import { setLocaleData } from "monaco-editor-nls";
import zh_CN from "monaco-editor-nls/locale/zh-hans";
setLocaleData(zh_CN);

// import * as monaco from "monaco-editor";
const monaco = require('monaco-editor/esm/vs/editor/editor.api');

各个依赖版本，package.json: 

{
  "dependencies": {
    ...
    "monaco-editor": "0.30.1",
    "monaco-editor-nls": "^2.0.0",
  },
  "devDependencies": {
    ...
    "monaco-editor-esm-webpack-plugin": "^2.0.0",
    "monaco-editor-webpack-plugin": "6.0.0"
  },
}

loaders加载问题

新版本monaco-editor （编辑文字时最新的是0.31）会有 loaders的加载问题，暂时没有找到解决方案，所以推荐使用  0.30.0版本，monaco-editor-webpack-plugin也要使用对应的版本，参考官方文档：monaco-editor/webpack-plugin at main · microsoft/monaco-editor · GitHub

键盘监听事件失效

Monaco Editor Playground (microsoft.github.io)是官方的键盘事件demo，但是在绑定Ctrl + S事件是却失效。测试多次版本后发现0.29.1是支持的，遂回滚至0.29.1版本后能解决。你也可以查看我的demo来复现问题：

Basic editor (codepen.io)

精简打包大小

使用terser-webpack-plugin

monaco-editor-webpack-plugin 与 monaco-editor 对应的版本

monaco-editor-webpack-plugin	monaco-editor
7.*.*	>= 0.31.0
6.*.*	0.30.*
5.*.*	0.29.*
4.*.*	0.25.*, 0.26.*, 0.27.*, 0.28.*
3.*.*	0.22.*, 0.23.*, 0.24.*
2.*.*	0.21.*
1.9.*	0.20.*
1.8.*	0.19.*
1.7.*	0.18.*

链接：

官方demohttps://microsoft.github.io/monaco-editor/playground.html

 更多内容请参考： 在webpack中使用monaco-editorhttps://www.cnblogs.com/zzsdream/p/14088741.html