Next.js × Monaco Editor：CDN 资源自托管教程

前端

2023-10-29 08:39:33

在 Next.js 中将 Monaco Editor 资源从 CDN 加载修改为从自己服务器加载

问题

在将 Monaco Editor 集成到我们的 Next.js 项目时，我们遇到了以下问题：

加载速度慢： 从 CDN 加载资源会导致初次加载页面时加载速度变慢。
稳定性差： CDN 服务器故障或中断会影响项目的稳定性。
可维护性低： CDN 资源的更新和维护由 CDN 提供商负责，降低了项目的可维护性。

解决方案

为了解决这些问题，我们决定将 Monaco Editor 资源从 CDN 加载修改为从我们自己的服务器加载。具体步骤如下：

安装依赖项

首先，我们需要安装必要的依赖项：

npm install --save @monaco-editor/react @monaco-editor/webpack-plugin

配置 Next.js

接下来，我们在 next.config.js 文件中添加以下代码：

const { MonacoWebpackPlugin } = require('@monaco-editor/webpack-plugin');

module.exports = {
  webpack: (config) => {
    config.plugins.push(
      new MonacoWebpackPlugin({
        languages: ['javascript', 'typescript'],
      })
    );

    return config;
  },
};

创建 Monaco Editor 组件

我们在项目中创建一个 monaco-editor 目录，并创建一个 index.js 文件：

import * as monaco from '@monaco-editor/react';

export default function MonacoEditor({ value, onChange }) {
  return (
    <monaco.Editor
      height="100%"
      width="100%"
      language="javascript"
      value={value}
      onChange={onChange}
    />
  );
}

使用 Monaco Editor 组件

最后，我们在项目中使用 MonacoEditor 组件：

import MonacoEditor from '../monaco-editor';

export default function Page() {
  const [value, setValue] = useState('');

  return (
    <MonacoEditor value={value} onChange={setValue} />
  );
}