使用 TypeScript 的 React 中的摩纳哥编辑器 -> 找不到模块 'monaco-editor'

Question

我一直在尝试将 monaco-editor 集成到 React 应用程序中。我取得了成功，但仍然面临问题。下面我提供了我的开发设置的详细信息。

我有 tsconfig.json 文件配置如下：

{
  "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 到运行我的 server.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)

这是server.tsx文件内容的副本：

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}`));

我的计划是使用正确的自定义服务器动态呈现我的组件，而不是在客户端这样做。

Answer 1

Monaco-editor 不支持服务器端渲染。它无法重新绑定到现有的 DOM 节点。不幸的是，它必须在客户端完成。并且，目前没有实现服务器端渲染功能的计划。

但是，对于那些有同样顾虑的人，如果您使用 Webpack 进行捆绑，请确保将最小化选项设置为 'true'。这样，您捆绑的 JS 文件就会小得多。此外，还有一个 'min' 版本的 monaco-editor 可用于生产；但它基于 AMD.

使用 TypeScript 的 React 中的摩纳哥编辑器 -> 找不到模块 'monaco-editor'

monaco-editor in React using TypeScript -> cannot find module 'monaco-editor'

typescript

reactjs

webpack-dev-server

monaco-editor