Using monaco-editor

Jul 9, 2023 · 1 min read · 98 Words · -Views -Comments

Installation

npm i react-monaco-editor monaco-editor

npm i monaco-editor-webpack-plugin -D

Webpack Bundling

    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/microsoft/monaco-editor/blob/main/webpack-plugin/README.md#options
      languages: ['shell', 'json', 'xml', 'yaml', 'sql', 'dockerfile', 'bat', 'ini', 'markdown', 'javascript'],
      filename: '/monaco-editor/[name].worker.[contenthash].js',
      publicPath: '',
      features: ['coreCommands'],
      globalAPI: false,
    }),

Note: the filename config only affects the main file. The dynamically loaded language module filenames are not affected by this setting. The workaround is as follows.

output:{  
    chunkFilename: ({ chunk }) => {
        const regex = /((?<=esm_)vs_(basic-languages|language)_.+)/;
        const language = chunk.id.match(regex);
        return language ? `vendor/monaco-${language[1]}.[chunkhash].js` : 'vendor/[name].[chunkhash].js';
      },
        },
  ...      
        
     optimization: {
      chunkIds: 'named',       
        ...
     }

References

Authors
Developer, digital product enthusiast, tinkerer, sharer, open source lover