背景

引入 @monaco-editor/react来实现大文本输入和代码编辑。

起因

在银行内网部署页面报错。

问题追踪

看到有一个网络请求失败，想到可能是 monaco-editor用到了某些网络资源，然后就去找node_modules，发现 monaco-editor本体实际是使用 loader.js加载的，然后 loader.js又默认使用了 CDN，所以导致整个组件都不好用。

解决过程

既然知道是资源请求出错了，那么就自己将资源放置到本地，然后请求就行了呗。

但是如何请求本地资源比较棘手,最简单的是直接去node_modules去修改地址，但是没办法同步到同事那里，一点都不优雅。

如果需要修改依赖的话，patch-packages刚好可以干这个事情，相对于直接修改，这个方法更好点。

然后通过翻官方文档找到其实插件支持修改路径的。

为啥官方要使用CDN:

解决方法

方法一

让部署的地方将CDN地址加入白名单（不现实）。

方法二

将资源放到本地，插件支持覆盖 loader 资源地址，去请求本地。我是直接放到了public下。

// 切换插件使用本地资源
loader.config({
  paths: { vs: `${PATH_PERFIX}/MonacoEditorSource/vs` }
});

// 附赠 MonacoEditor 封装
import React from 'react';
import type {EditorProps} from '@monaco-editor/react';
import Editor from '@monaco-editor/react';
import { loader } from '@monaco-editor/react';
import styles from './index.less'
import { PATH_PERFIX } from '@/utils/default';

// 切换插件使用本地资源
loader.config({
  paths: { vs: `${PATH_PERFIX}/MonacoEditorSource/vs` }
});


export type MonacoEditorProps = EditorProps

const MonacoEditor: React.FC<MonacoEditorProps> = (props) => (
  <div className={styles.container} style={{height: props.height ?? '300px'}}>
    <Editor
      theme="vs-dark"
      {...props}
      height="100%"
    />
  </div>
)

export default MonacoEditor;