Umi4解决@monaco-editor/react使用本地editor报错的问题

前言

使用@monaco-editor/react默认会通过CDN获取editor，内网或者网络环境不好时会导致加载很慢或失败。

解决思路

1. 通过node_modules引入editor

import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';

loader.config({ monaco });

引入后会发现报错，但可以正常使用

2. 解决报错

在umi4的配置文件中修改chainWebpack配置

import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';

export default defineConfig({
  //...,
  chainWebpack: (memo) => {
    // 更多配置 https://github.com/Microsoft/monaco-editor-webpack-plugin#options
    memo.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      // 按需配置
      { languages: ['json'] },
    ]);
    return memo;
  },
  //...,
});

umi4注意事项

1. 不能使用esbuild进行编译

在umi4配置文件中对应mfsu

//...,
mfsu: {
  //esbuild:true, //如果为true就删掉
  //...,
},
//...,

2. 注意monaco-editor-webpack-plugin与monaco-editor版本对应