背景

某天產(chǎn)品要求在項目的某個頁面添加一個代碼編輯器，包含編輯器常見的功能。看完需求，想到了強大的Monaco Editor。按照官方文檔進行配置開發(fā)，就在自己覺得大功告成之際，右擊編輯框，發(fā)現(xiàn)功能菜單是英文狀態(tài)，然后就開啟了我的右鍵功能菜單漢化之路。

問題剖析

在Monaco Editor的整個使用配置過程中，我沒有添加關(guān)于本地語言的配置，所以目前使用的應該是默認配置。
所以目前解決問題的思路是：

查看官方API文檔尋找關(guān)于本地語言的配置

尋找可以進行本地語言配置的第三方插件/庫

按照以上思路首先在Monaco Editor官方文檔中進行一番搜索嘗試無果后，開始轉(zhuǎn)向相關(guān)第三方插件/庫的尋找，最終找到了monaco-editor-esm-webpack-plugin和monaco-editor/loader

解決方案

方案一：使用monaco-editor-esm-webpack-plugin

依賴下載

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

npm install monaco-editor monaco-editor-webpack-plugin monaco-editor-nls

vue.config.js文件

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
configureWebpack: {
    plugins: [
        new MonacoWebpackPlugin()
    ]
}

xx.vue文件

import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';
setLocaleData(zh_CN);
// 先漢化語言，再加載monaco才能漢化成功，使用import方式無法漢化
// 需要使用require方式引入monaco-editor
const monaco = require('monaco-editor/esm/vs/editor/editor.api');

monaco.editor.create(document.getElementById('root'), { language: 'xml' });

效果圖如下:

從效果圖我們發(fā)現(xiàn)功能菜單的”命令面板“是中文的了，但是”Copy“還是英文

方案二：使用monaco-editor/loader

依賴下載

npm install @monaco-editor/loader

xx.vue

import loader from '@monaco-editor/loader';
loader.config({ 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } }); // availableLanguages中可以配置想要的語言，例如de、zh-cn等
loader.init().then(monaco => {
    monaco.editor.create(document.querySelector("#mxlContainer"), {
    value: '',
    language: 'xml',
  });
});

至此已經(jīng)完成。瀏覽下效果圖

從效果圖來看已經(jīng)達到了我們的目標。但仔細看上方代碼發(fā)現(xiàn)我們用的monaco實例是monaco-editor/loader自動從CDN下載后返回的，
如果我們想通過npm包的方式使用應該怎么做呢？廢話不多說，直接上代碼

import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor';
// 通過config方法我們可以配置我們使用的資源是通過非CDN方式引入
loader.config({ monaco });
// 需要注意本地語言（locales）的配置一定放在loader.config({ monaco })后邊，否則設置的locales會被npm包的monaco配置覆蓋，導致設置locales失敗
loader.config({ "vs/nls": { availableLanguages: { "*": "zh-cn" } } });
loader.init().then(monacoInstance => { 
    // 通過loader.config({monaco})的配置后，此處的monacoInstance其實是我們 import * as monaco from 'monaco-editor'進來的npm包
   monacoInstance.editor.create(document.querySelector("#mxlContainer"), {
    value: '',
    language: 'xml',
  }); 
});

版本

"monaco-editor": "^0.30.1"
"monaco-editor/loader": "^1.3.2"
"node": "v14.15.4"
"webpack": "v4.28.4"

小結(jié)

monaco-editor/loader會自動處理配置和加載monaco源碼，并且它的使用方式與項目打包方式解耦，只需在需要使用的文件中引入即可。使用方式靈活，適用范圍更加廣闊。

審核編輯 黃宇