monaco-editor使用

发表于 更新于 本文字数： 1.1k 阅读时长 ≈ 2 分钟
本文是作者对monaco-editor使用的介绍，包括monaco-editor使用的优势、实现细节、相关资料等，这些步骤可以帮助作者提高monaco-editor使用的效率。

安装

1
2
3
npm i react-monaco-editor monaco-editor

npm i monaco-editor-webpack-plugin -D

Webpack打包

1
2
3
4
5
6
7
8
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,
}),

注意：filename配置只影响了主文件，动态加载的语言模块文件名并不受该设置影响。解决办法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
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',       
        ...
     }

相关文档