javascript - CKEditor: [CKEditorWebpackPlugin] 错误: 编译期间发现太多 JS 资源

Question

我正在将我的 Rails/React 应用程序中的 CKEditor 包从 ~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.For more details visit https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-webpack-plugin.

---

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({
    // On Heroku git is not available, but SOURCE_VERSION is provided
    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"]

// Add support for CKEditor 5.
const CKEditorWebpackPlugin = require("@ckeditor/ckeditor5-dev-webpack-plugin")

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

// Define custom loaders for CKEditor's SVG and CSS files.
environment.loaders.append("CKEditorSVGLoader", require("./loaders/ckeditor/svg"))
environment.loaders.append("CKEditorCSSLoader", require("./loaders/ckeditor/css"))

// Tell the standard CSS and file loaders to ignore CKEditor's CSS and SVG files. We have our own loaders for those.
environment.loaders.get("css").exclude = /(\.module\.[a-z]+$)|(ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css)/
environment.loaders.get("file").exclude = /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/

module.exports = environment

项目正在运行:

• ruby 2.6.6
• rails 6.0.3.6
• webpack-dev-server": 3.11.2

Answer 1

我在制作 custom build 时也遇到了这个问题在 CKEditor 中。所以我假设你关注了these instructions (“Webpack Encore”部分)。

在此解决方案中，我使用的是 webpack.config.js 配置文件(PHP 使用 Encore 设置)。配置文件名可能会从一种语言更改为另一种语言。如果您没有使用 Encore(我建议使用它)，代码可能会有所不同，但逻辑是相同的。

<强>1。如果您的构建不需要翻译:

只需从 webpack.config.js 中删除这部分:

.addPlugin( new CKEditorWebpackPlugin( {
    language: 'pl'
} ) )

<强>2。如果您需要翻译:

添加 addMainLanguageTranslationsToAllAssets 选项并将其设置为 true，如下所示:

.addPlugin( new CKEditorWebpackPlugin( {
    language: 'pl',
    addMainLanguageTranslationsToAllAssets: true
} ) )