使用 monaco-editor-nls 汉化右键菜单汉化部分失败原因

最新推荐文章于 2024-08-23 11:56:51 发布

落魄切图仔

最新推荐文章于 2024-08-23 11:56:51 发布

阅读量2.3k

点赞数

文章标签：编辑器 javascript

本文链接：https://blog.csdn.net/qq_44096635/article/details/131966757

版权

本文介绍了如何使用npm安装MonacoEditor及相关依赖，解决汉化问题。当右键菜单汉化失败时，检查monaco-editor-nls的locale目录，并更新到特定版本。在Webpack配置中，需引入monaco-editor-esm-webpack-plugin以实现汉化。同时，文章强调了设置语言包的顺序以及使用require方式引入monaco-editor的重要性。

摘要由CSDN通过智能技术生成

首先使用npm或者其他包管理工具安装依赖插件：

npm install monaco-editor --save
npm install monaco-editor-nls --save
npm install monaco-editor-webpack-plugin --save
npm install monaco-editor-esm-webpack-plugin --save-dev

如果右键菜单汉化一部分失败，首先去项目下看node_modules/monaco-editor-nls/locale/zh-hans中搜vs/editor/contrib/format/看一下是否有路径有brower字段，再去对应的node_modules/monaco-editor/esm/vs/editor/contrib/format/formatActions看是否有brower文件夹

如果有：那么安装monaco-editor-nls最新版本
没有：安装monaco-editor-nls2.0版本

npm install monaco-editor-nls@^2.0.0 --save

在这里插入图片描述

webpack.config.js 添加配置：

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
 
module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.js/,
				enforce: 'pre',
				include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
				use: MonacoWebpackPlugin.loader
			}]
		},
		plugins: [
			new MonacoWebpackPlugin()
		]
	}
}

此处需要引入monaco-editor-esm-webpack-plugin，引入monaco-editor-webpack-plugin无法汉化成功设置语言包

// 汉化 monaco
import { setLocaleData } from "monaco-editor-nls"
import zh_CN from "monaco-editor-nls/locale/zh-hans.json"
setLocaleData(zh_CN)
//先汉化语言，再加载monaco才能汉化成功，使用import方式无法汉化
//需要使用require方式引入monaco-editor
//import * as monaco from 'monaco-editor' 
const monaco = require("monaco-editor/esm/vs/editor/editor.api"); 
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import languages from "./language";