monaco-editor 汉化

最新推荐文章于 2024-07-11 09:58:48 发布

小m的雨季

最新推荐文章于 2024-07-11 09:58:48 发布

阅读量5.2k

点赞数 1

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/u014586621/article/details/126230657

版权

monaco-editor 汉化,需求拿到百度一番:

monaco editor 汉化 - 掘金webpack 项目 monaco editor 本地化首先安装插件 webpack.config.js 设置语言包——index.js 使用monaco editorhttps://juejin.cn/post/6965675865673826335

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

webpack配置:

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin'); //使用require,esm版本

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

//设置语言包
import { setLocaleData } from "monaco-editor-nls";
import zh_CN from "monaco-editor-nls/locale/zh-hans";

setLocaleData(zh_CN)

//使用
//注意不要使用esm方式引入，webpack会提前打包，导致语言包设置失败，使用动态import
 const monaco = require("monaco-editor/esm/vs/editor/editor.api");
 const editor = monaco.editor.create(document.getElementById('monaco_editor'), {
    value: 'export const msg = "hello world"',
  });

装完发现版本太高.还有loader 报错等问题,

继续搜:

monaco-editor的使用，以及在webpack汉化_izhuoo的博客-CSDN博客_monaco-editor

使用下面版本汉化:

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

使用以上版本再加上之前的配置,完成汉化