Skip to content

wang12124468/monaco-editor-esm-webpack-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

monaco-editor-esm-webpack-plugin

Change log

It dependency on monaco-editor-webpack-plugin.
If you want copy a monaco editor with localization, you can see primefaces-monaco

The webpack's plugin for monaco editor to compile the worker and handle with localization.

Installing

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

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

Using

  • 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()
        ]
    };
    

Localization

  • Set the locale data in your code

    // index.js
    import { setLocaleData } from 'monaco-editor-nls';
    import zh_CN from 'monaco-editor-nls/locale/zh-hans';
    
    setLocaleData(zh_CN);
    
    // You must import/require after `setLocaleData`
    // Do not use `import * as monaco from 'XXX'`, but can use `import('xxx').then(XXX)`
    const monaco = require('monaco-editor/esm/vs/editor/editor.api');
    
    monaco.editor.create(document.getElementById('root'), { language: 'javascript' });
    

Options

There only two options for this plugin. But you can set the monaco-editor-webpack-plugin's options in this options. such as: new MonacoWebpackPlugin({ languages: ['typescript'] })

  • isMonacoEditorWebapckPlugin - whether monaco-editor-webpack-plugin is used. Default: true

  • isReplaceNls - whether replace the nls file. Default: true

Q & A

About

No description or website provided.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published