Angular 4中Webpack构建CKEditor 5源码至ES5报错求助

我之前手动构建CKEditor5 Balloon Editor的时候也踩过这个坑，这个错误多半是版本不兼容或者webpack配置没做对导致的，给你几个亲测有效的解决方向：

1. 严格对齐CKEditor5所有包的版本 #

CKEditor5的核心包和各个插件版本必须完全一致，哪怕小版本差一点都可能触发这类奇怪的构建问题：

• 打开你的package.json，检查所有@ckeditor/ckeditor5-*开头的依赖，确保版本号完全相同
• 如果版本混乱，执行命令统一更新到最新兼容版本：

  npm install @ckeditor/ckeditor5-core@latest @ckeditor/ckeditor5-balloon-editor@latest [你用到的其他插件包]@latest
  

2. 检查webpack的CKEditor5专属配置 #

这个错误大概率和ckeditor5-webpack-plugin或资源loader的配置有关，你需要确保webpack正确处理CKEditor5的静态资源：

• 先确认安装了必要的开发依赖：

  npm install --save-dev ckeditor5-webpack-plugin raw-loader style-loader css-loader postcss-loader postcss-custom-properties autoprefixer
  

• 然后检查webpack配置文件中的插件和规则是否正确：

  const CKEditorWebpackPlugin = require('ckeditor5-webpack-plugin');
  
  module.exports = {
    // ...其他基础配置
    plugins: [
      new CKEditorWebpackPlugin({
        language: 'en', // 按需设置语言，不需要多语言可留空
        additionalLanguages: 'all'
      })
    ],
    module: {
      rules: [
        // 处理CKEditor5的图标资源
        {
          test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
          use: ['raw-loader']
        },
        // 处理CKEditor5的主题样式
        {
          test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
          use: [
            {
              loader: 'style-loader',
              options: { injectType: 'singletonStyleTag' }
            },
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    require('postcss-custom-properties'),
                    require('autoprefixer')
                  ]
                }
              }
            }
          ]
        }
      ]
    }
  };
  

3. 修正entry入口的写法 #

你提到注释当前entry换另一种方式，这里要注意：源码构建的entry和使用预构建包的写法完全不同，正确的源码入口应该是直接导入编辑器类并初始化：

• 新建一个入口文件（比如src/ckeditor.js）：

  import { BalloonEditor } from '@ckeditor/ckeditor5-editor-balloon';
  import { Essentials } from '@ckeditor/ckeditor5-essentials';
  import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
  // 按需导入你需要的其他插件
  
  // 初始化编辑器
  BalloonEditor.create(document.querySelector('#editor'), {
    plugins: [Essentials, Bold, Italic], // 列出所有启用的插件
    toolbar: ['bold', 'italic'] // 配置工具栏按钮
  })
  .then(editor => console.log('编辑器初始化完成', editor))
  .catch(err => console.error(err.stack));
  

• 然后webpack的entry指向这个文件：

  module.exports = {
    entry: './src/ckeditor.js',
    // ...其他配置
  };
  

4. 清理缓存后重新构建 #

有时候依赖缓存会导致加载异常，执行以下命令彻底清理后重新安装构建：

rm -rf node_modules package-lock.json
npm install
npm run build

如果以上步骤都试过还是不行，可以把你的package.json依赖列表和完整webpack配置贴出来，方便进一步排查问题。

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