ice
ice copied to clipboard
alibaba
ICE3 引入 monaco-editor-webpack-plugin 发生异常
Describe the bug
第一步：配置构建：ice.config.mts:
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
export default defineConfig(() => ({
webpack: (webpackConfig) => {
webpackConfig.plugins?.push(new MonacoWebpackPlugin());
return webpackConfig;
},
}));
第二步：封装一个编辑器组件：src/components/Editor/index.tsx：
import * as monaco from 'monaco-editor';
import MonacoEditor, { loader } from '@monaco-editor/react';
import { useRef } from 'react';
loader.config({ monaco });
function Editor({ value }: { value: string }) {
const editorRef = useRef(null);
function handleEditorDidMount(editor: any) {
editorRef.current = editor;
}
return <MonacoEditor height="30vh" theme="vs-dark" onMount={handleEditorDidMount} value={value} defaultLanguage="json" />;
}
export default Editor;
然后，出现以下异常：
Compile Error: 09:35:12
Failed to compile the code, please refer to the following errors for troubleshooting.
× Error: × Rspack FS Error: Error: ENOENT: no such file or directory, unlink '/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/build/assets-manifest.json'
│ │
│ ╰─▶ Error: ENOENT: no such file or directory, unlink '/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/build/assets-manifest.json'
│
│
│
× Conflict: Multiple assets emit different content to the same filename assets-manifest.json
× Conflict: Multiple assets emit different content to the same filename assets-manifest.json
Expected behavior
能正常使用 monaco-editor。
Actual behavior
No response
Version of ice.js
"@ice/app": "^3.4.0",
Content of build.json or ice.config.mts
Additional context
脚手架信息：
pkg: {
name: '@ice/antd-pro-scaffold',
version: '1.3.0',
description: 'ice.js 3 Pro 模板（基于 Ant Design）',
dependencies: [Object],
devDependencies: [Object],
scripts: [Object],
publishConfig: [Object],
repository: '[email protected]:ice-lab/react-materials.git'
},
依赖信息：
{
"dependencies": {
"@ant-design/charts": "^1.4.2",
"@ant-design/icons": "^4.7.0",
"@ant-design/pro-form": "^2.2.8",
"@ant-design/pro-layout": "^7.1.6",
"@ant-design/pro-table": "^3.0.17",
"@ice/runtime": "^1.4.0",
"@monaco-editor/react": "^4.7.0",
"antd": "^4.24.0",
"lodash": "^4.17.21",
"monaco-editor": "^0.52.2",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@applint/spec": "^1.2.3",
"@ice/app": "^3.4.0",
"@ice/plugin-auth": "^1.0.0",
"@ice/plugin-request": "^1.0.0",
"@ice/plugin-store": "^1.0.0",
"@types/node": "^18.11.17",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"eslint": "^8.35.0",
"monaco-editor-webpack-plugin": "^7.1.0",
"stylelint": "^15.2.0",
"typescript": "^4.8.4"
},
}
先试试去掉 start 脚本上的 --speedup，另外使用 @monaco-editor/react 配合 loader 加载资源，monaco-editor-webpack-plugin 并不是必选
尝试去掉 --speedup，去掉 monaco-editor-webpack-plugin，尝试通过 @monaco-editor/react 的 loader 实现：
// src/pages/demo/index.tsx
import * as monaco from 'monaco-editor';
import MonacoEditor, { loader } from '@monaco-editor/react';
loader.config({ monaco });
重新执行 npm start，出现异常：
终端中提示：
$ npm start
> @ice/[email protected] start
> ice start
webpack 5.88.2 compiled with 1 warning in 13913 ms
WARN Client compiled with warnings. 10:34:57
WARN Warning 10:34:57
(46:2) autoprefixer: end value has mixed support, consider using flex-end instead
10:34:57
Starting the development server at:
- Local : http://localhost:3000/
- Network: http://10.77.32.47:3000/
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/node_modules/@ice/bundles/compiled/css-loader/index.js??ruleSet[1].rules[2].use[1]!/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/node_modules/@ice/bundles/compiled/postcss-loader/index.js??ruleSet[1].rules[2].use[2]!/Users/xiang/Workspaces/Projects/web-app/ice-app--ant-design-pro/node_modules/monaco-editor/esm/vs/editor/contrib/hover/browser/hover.css': No serializer registered for Warning
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
按下面操作成功了：
1、清理 package.json 依赖
- 删除
@monaco-editor/react依赖 - 添加
monaco-editor-webpack-plugin依赖 - 去掉
start指令--speedup选项 (@ClarkXia 这个对开发体验有较大影响么？)。
{
"dependencies": {
"monaco-editor": "^0.52.2",
},
"devDependencies": {
"monaco-editor-webpack-plugin": "^7.1.0",
},
"scripts": {
"start": "ice start",
},
}
2、配置构建：ice.config.mts
import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
export default defineConfig(() => ({
// ...
webpack: (webpackConfig) => {
webpackConfig.plugins?.push(new MonacoWebpackPlugin() as any);
return webpackConfig;
},
}));
3、封装编辑器组件
src/components/MonacoEdito/index.tsx:
import { useRef, useState, useEffect } from 'react';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
import styles from './Editor.module.css'; // .Editor { width: 100vw; height: 100vh; }
export default function MonacoEditor(props: any) {
const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
const monacoEl = useRef(null);
useEffect(() => {
if (monacoEl) {
setEditor((editor) => {
if (editor) return editor;
return monaco.editor.create(monacoEl.current!, {
value: props.value,
language: props.language,
theme: props.theme,
});
});
}
return () => editor?.dispose();
}, [monacoEl.current]);
useEffect(() => {
if (editor) {
editor.setValue(props.value);
}
}, [props.value]);
return <div className={styles.Editor} ref={monacoEl} />;
}
4、调用组件
src/pages/demo/index.tsx:
import { Card } from 'antd';
import { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import MonacoEditor from '@/components/MonacoEditor';
export default function Demo() {
const [editorValue, setEditorValue] = useState('');
return (
<PageContainer>
<Card>
{/* 生成源码的组件 */}
</Card>
<Card>
{/* 展示源码 */}
<MonacoEditor value={editorValue} language="json" theme="vs-dark" />
</Card>
</PageContainer>
);
}