Monaco editor localization

Localization of the WebPack project Monaco Editor

• First install the plug-in

npm install monaco-editor-esm-webpack-plugin --save-dev
npm install monaco-editor monaco-editor-webpack-plugin monaco-editor-nls
Copy the code

• webpack.config.js

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');

module.exports = {
    entry: './index.js'.output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.js'
    },
    module: {
        rules: [{test: /\.js/,
                enforce: 'pre'.include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
                use: MonacoWebpackPlugin.loader
            },
            {
                test: /\.css$/,
                use: ['style-loader'.'css-loader']]}},plugins: [
        new MonacoWebpackPlugin()
    ]
};
Copy the code

• Set the language package — index.js

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

setLocaleData(zh_CN);
Copy the code

• The use of Monaco editor

Note do not use the ESM mode to import, webpack will be packaged in advance, resulting in language package Settings fail, use dynamic 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"'});Copy the code