如何将 CKEditor 5 的自定义版本与 React 和 Vite 结合使用？

Question

在过去的几个月里，我一直在使用 Create React App 构建我的应用程序。

但是，Ionic 现在支持 Vite，我正在尝试将我的应用程序从 CRA 迁移到 Vite。

最初，我制作了一个 CKEditor 5 Custom Build 并将其设置在 React 应用程序中，如下所示：

import React from 'react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore  Ckeditor does not supply TypeScript typings.
import { CKEditor } from '@ckeditor/ckeditor5-react';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore  Ckeditor does not supply TypeScript typings.
import Editor from 'ckeditor5-custom-build/build/ckeditor';

在构建我的应用程序之前，我像这样构建自定义 CKEditor：

cd ckeditor5; npm run build

CKEditor 构建命令是

webpack --mode production

。

现在，配置完Vite后，当我运行

npm run build

时，出现以下错误：

'default' 不是由 ckeditor5/build/ckeditor.js 导出，而是由 src/components/contentTypeCard/CKEditorInput.tsx

CKEditor 问题队列中有一个 线程关于缺乏有关 Vite 问题的文档，但没有特别说明如何解决此问题。

我尝试了什么

我尝试在开发模式下构建 CKEditor (

webpack --mode development

) 并检查

ckeditor.js

文件以尝试导出编辑器，但该文件有超过 100,000 行代码，我完全迷失了。

Answer 1

就我而言：

“反应”：“18.2.0”， “vite”：“2.9.10”，

这是我找到的解决方案：

package.json

"ckeditor5-custom-build": "file:libs/ckeditor5",

vite.config.ts

export default defineConfig(() => {
  return {
    plugins: [react()],
    optimizeDeps: {
      include: ['ckeditor5-custom-build'],
    },
    build: {
      commonjsOptions: { exclude: ['ckeditor5-custom-build'], include: [] },
    },
  };
});

RichTextEditor.tsx

import { CKEditor, CKEditorProps } from '@ckeditor/ckeditor5-react';
import Editor from 'ckeditor5-custom-build';

export function RichTextEditor({
  defaultValue,
  ...props
}: RichTextEditorProps) {
  return (
    <EditorContainer>
      <CKEditor editor={Editor} data={defaultValue || ''} {...props} />
    </EditorContainer>
  );
}

vite 4.4.8更新：

"vite": "4.4.8",

vite.config.ts

import commonjs from "vite-plugin-commonjs";

export default defineConfig(() => {
  return {
    plugins: [
      react(),
      commonjs({
        filter(id) {
          if (["libs/ckeditor5/build/ckeditor.js"].includes(id)) {
            return true;
          }
        },
      }),
    ],
    optimizeDeps: {
      include: ["ckeditor5-custom-build"],
    },
    build: {
      commonjsOptions: { exclude: ["ckeditor5-custom-build"] },
    },
  };
});

Answer 2

就我而言，它有效。

import Editor from 'ckeditor5-custom-build/build/ckeditor';
↓
import * as Editor from 'ckeditor5-custom-build/build/ckeditor';