SvelteKit中CKEditor 5作为Node模块可正常运行，本地构建版本无法使用

我之前也踩过这个坑！用官方npm包的CKEditor 5在SvelteKit里好好的，换成本地构建版就拿不到默认导出了，控制台打印模块也只有个空的Module对象，简直头大。咱们来一步步排查解决：

• 先确认本地构建的模块格式
  官方CKEditor的npm包是用ESM格式打包的，但自己构建的版本默认可能是UMD格式——这种格式会把编辑器挂载到全局对象（比如window）上，而不是用ESM的export default导出。你可以打开本地的ckeditor.js文件看看，要是里面有window.CKEDITOR = ...或者define('ckeditor', ...)这类代码，那肯定是UMD格式没错了。

• 适配UMD格式的导入方式
  如果是UMD格式，别再纠结module.default了，直接从全局对象拿就行：

  <script>
  import { onMount } from 'svelte';
  let Editor;
  onMount(async () => {
    // 导入UMD模块，它会自动挂载到window上
    await import('$lib/ckeditor');
    // 从全局对象获取编辑器类
    Editor = window.CKEDITOR;
    Editor.create(document.querySelector('#editor'), {}).then((editor) => {
      console.log(editor);
    });
  });
  </script>
  

  这里用$lib别名代替src/lib是SvelteKit的标准写法，也能避免路径解析出错。

• 改成ESM格式构建（推荐）
  要是想和用npm包时的导入体验一致，最好把本地构建改成ESM格式。你可以用CKEditor官方的@ckeditor/ckeditor5-build-tools来配置构建，在构建脚本里指定输出为ESM格式，比如在webpack配置里设置：

  output: {
    libraryTarget: 'module',
    // 其他配置...
  }
  

  这样构建出来的文件就会用export default导出编辑器类，你原来的导入代码就能正常工作了。

• 最后检查路径和构建完整性
  还要确认本地构建的ckeditor.js文件没有损坏，路径确实指向正确的文件——有时候复制文件时漏掉了部分内容，也会导致模块导出异常。

内容的提问来源于stack exchange，提问作者Wilson Wilson