如何解决React 中使用 TypeScript 的 monaco-editor -> 找不到模块“monaco-editor”
我一直在尝试将 monaco-editor 集成到 React 应用程序中。我取得了成功，但仍然面临问题。下面我提供了我的开发设置的详细信息。
{
"compilerOptions": {
"target": "ES6","module": "Commonjs","lib": ["dom","es5","es2015.collection","es2015.promise","dom.iterable"],"jsx": "react","sourceMap": true,"checkJs": false,"outDir": "./dist","strict": true,"moduleResolution": "node","baseUrl": "./node_modules","typeRoots": ["node_modules/@types"],"allowJs": true,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true,"preserveConstEnums": true,"isolatedModules": true
},"include": ["./src/**/*"],"exclude": ["node_modules"]
}
我的 package.json 的脚本配置如下：
"scripts": {
"test": "jest","start": "webpack serve","server": "nodemon --exec ts-node server.tsx","build": "webpack -w --mode=development"
}
start 脚本使用 webpack-dev-server，服务器使用 ts-node 运行我的 服务器。 tsx 文件。
monaco-editor 在 React 组件 .tsx 文件中作为 import * as monaco from 'monaco-editor';
当我运行这个命令时：npm run start 使用 webpack-dev-server 一切都很好，我能够在浏览器中看到我的应用程序。
但是，当我运行此命令：npm run server 使用 ts-node 执行 server.tsx 文件时，我收到此错误：
Error: Cannot find module 'monaco-editor'
Require stack:
- D:\Development\Workstation\VividCodes.UI_OLD\src\components\TestMonaco.tsx
- D:\Development\Workstation\VividCodes.UI_OLD\src\components\App.tsx
- D:\Development\Workstation\VividCodes.UI_OLD\server.tsx
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
at Function.Module._load (internal/modules/cjs/loader.js:725:27)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
import express from 'express';
import * as React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './src/components/App';
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const webpackHotMiddleware = require('webpack-hot-middleware');
const server = express();
const compiler = webpack(config);
const port = 3000;
server.use(
webpackDevMiddleware(compiler,{
publicPath: config.output.publicPath,})
);
server.use(webpackHotMiddleware(compiler));
server.get('/',(req: any,res: any) => {
const initialMarkup = ReactDOMServer.renderToString(<App />);
console.log(initialMarkup);
res.send(`
<html>
<head>
<title>Monaco_Editor</title>
</head>
<body>
<div id="mountNode">${initialMarkup}</div>
<script src="/app.bundle.js"></script>
<script src="/editor.worker.bundle.js"></script>
<script src="/json.worker.bundle.js"></script>
<script src="/css.worker.bundle.js"></script>
<script src="/html.worker.bundle.js"></script>
<script src="/ts.worker.bundle.js"></script>
</body>
</html>
`)
});
server.listen(port,() => console.log(`Server started on port: ${port}`));
我的计划是使用正确的自定义服务器来动态呈现我的组件，而不是在客户端这样做。
解决方法
Monaco-editor 不支持服务器端渲染。它不能重新绑定到现有的 DOM 节点。不幸的是，它必须在客户端完成。并且，目前没有实现服务器端渲染功能的计划。
但是，对于那些有同样担忧的人，如果您使用 Webpack 进行捆绑，请确保将最小化选项设置为“true”。这样，您捆绑的 JS 文件会小得多。此外，还有一个“min”版本的 monaco-editor 可用于生产；但它基于 AMD。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
