monaco editor 汉化

webpack 项目 monaco editor 本地化

• 首先安装插件

npm install monaco-editor-esm-webpack-plugin --save-dev
npm install monaco-editor monaco-editor-webpack-plugin monaco-editor-nls
复制代码

• 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()
    ]
};
复制代码

• 设置语言包——index.js

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

setLocaleData(zh_CN);
复制代码

• 使用monaco editor

注意不要使用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"',
  });
复制代码