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

izhuoo

已于 2023-03-08 14:36:13 修改

阅读量6k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：踩坑文章标签： webpack 前端 node.js vscode monaco-editor

于 2022-02-21 10:08:27 首次发布

本文链接：https://blog.youkuaiyun.com/izhuoo/article/details/123040800

本文介绍了如何在webpack项目中使用monaco-editor进行汉化，包括引入`monaco-editor-esm-webpack-plugin`和`monaco-editor-nls`，以及解决键盘监听事件失效和loaders加载问题。此外，还提到了通过特定版本降低冲突，并利用terser-webpack-plugin优化打包大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

汉化

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"
  },
}