Rails/React升级CKEditor5至v27后报CKEditorWebpackPlugin资产过多错误的方案咨询

项目基础环境 #

• Ruby 2.6.6
• Rails 6.0.3.6
• webpack-dev-server 3.11.2
• 已将 CKEditor 5 从 ~12 版本升级至 27 最新版

本地启动服务时报错内容 #

运行 webpack-dev-server 时触发插件编译校验，报错如下：

[CKEditorWebpackPlugin] Error: Too many JS assets has been found during the compilation. You should use one of the following options to specify the strategy:
 - use `addMainLanguageTranslationsToAllAssets` to add translations for the main language to all assets,
 - use `buildAllTranslationsToSeparateFiles` to add translation files via `<script>` tags in HTML file,
 - use `translationsOutputFile` to append translation to the existing file or create a new asset.

现有 Webpack 配置（environment.js） #

const { environment } = require("@rails/webpacker")
const typescript = require("./loaders/typescript")
const GitRevisionPlugin = require("git-revision-webpack-plugin")

environment.loaders.append("typescript", typescript)

environment.plugins.prepend(
  "Define",
  new webpack.DefinePlugin({
    // 在Heroku环境下无法使用git，但会提供SOURCE_VERSION
    GIT_VERSION: JSON.stringify(process.env.SOURCE_VERSION || new GitRevisionPlugin().commithash()),
    BUILD_TIME: JSON.stringify(new Date().toISOString()),
  })
)

environment.plugins.prepend(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    jquery: "jquery",
    "window.jQuery": "jquery",
  })
)

environment.config.externals = ["cloudinary"]

// CKEditor 5 相关配置
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")

environment.plugins.prepend(
  "CKEditor",
  new CKEditorWebpackPlugin({
    language: "en",
  })
)

// CKEditor 自定义加载器配置
environment.loaders.append("CKEditorSVGLoader", require("./loaders/ckeditor/svg"))
environment.loaders.append("CKEditorCSSLoader", require("./loaders/ckeditor/css"))

// 全局加载器排除CKEditor专属文件，避免冲突
environment.loaders.get("css").exclude = /(\.module\.[a-z]+$)|(ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css)/
environment.loaders.get("file").exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/

module.exports = environment

报错核心原因 #

CKEditor Webpack 插件在新版本新增了多资产场景的强制校验逻辑：当编译输出存在多个独立 JS 入口文件时，插件无法自动判断翻译内容应该注入到哪个资产包中，必须手动指定翻译注入策略，否则直接中断编译流程。

三类配置选项的适用场景 #

• addMainLanguageTranslationsToAllAssets：将主语言（当前配置为英文）的翻译内容打包注入每一个 JS 入口包。适合无复杂多入口拆分、CKEditor 在全局路由通用的项目，缺点是会重复打包相同翻译代码，推高整体包体积。
• buildAllTranslationsToSeparateFiles：将全量语言的翻译内容拆分为独立 JS 静态文件，需要在页面 HTML 中手动通过 <script> 标签引入对应语言的翻译包。适合需要做多语言动态切换、严格控制主入口包体积的项目。
• translationsOutputFile：将翻译内容统一追加到指定的某一个已有 JS 资产包，或者单独生成独立的翻译包。适合 Rails Webpacker 默认的多入口拆分结构，不会产生冗余重复代码，是该类场景下的最优选择。

适配当前项目的修改方案 #

针对 Rails 6 + Webpacker 多入口的项目结构，无需将翻译重复注入所有入口包，直接将英文翻译统一输出到公共入口 application.js 即可，修改 CKEditor 插件配置如下：

environment.plugins.prepend(
  "CKEditor",
  new CKEditorWebpackPlugin({
    language: "en",
    // 指定将翻译内容统一注入公共入口包
    translationsOutputFile: /application\.js$/,
  })
)

配置说明：translationsOutputFile 的正则匹配值需要和项目实际的公共入口文件名保持一致，插件会自动识别编译后的 JS 资产，将翻译内容追加到匹配的文件中，既不会产生冗余代码，也不会触发多资产校验报错。

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