在 umijs 项目中使用 Monaco Editor 的配置

umi中使用 Monaco Editor，一开始没有代码没颜色，按照react-monaco- editor的官方文档，需要配置文本pack，一开始不知道如何配置，所以做下记录

在 umijs 项目中使用 Monaco Editor 的配置
安装相关包
yarn add monaco-editor、yarn add monaco-editor-webpack-plugin、yarn add react-monaco-editor
添加 chainWebpack 配置
import MonacoWebpackPlugin from ‘monaco-editor-webpack-plugin’;
…
const chainWebpack = (config, { webpack }) => {
config.plugin(‘monaco-editor’).use(MonacoWebpackPlugin, [
{
languages: [‘yaml’]
}
])
};
export default{
…
chainWebpack
}
使用
<Monaco
width=“100%”
height=“100%”
language=“yaml”
theme=“vs-light”
value={code}
options={{ selectOnLineNumbers: true }}
/>