带有 Webpack 和 Stimulus 的 Symfony 在每个页面上加载所有控制器

Question

我对标题中提到的设置有疑问。项目使用 Symfony 7.1 以及 Webpack encore 和stimulus。我有单个页面和激励控制器的 custom.js 文件的组合。不幸的是，所有刺激控制器都捆绑到 app.js 中并加载到每个页面上。即使有

/* stimulusFetch: 'lazy' */

评论。

这是一件可怕的事情，因为我有很多自定义控制器，它们适用于单个页面，而不是整个网站。这无缘无故地增加了捆绑包的大小，并且某些控制器不适合公共用户，而是注册/登录的用户。

如何更改此行为并仅在需要的地方加载控制器？当前的 bootstrap.js 默认来自 Symfony：

import { startStimulusApp } from "@symfony/stimulus-bridge";

// Registers Stimulus controllers from controllers.json and in the controllers/
export const app = startStimulusApp(
  require.context(
    "@symfony/stimulus-bridge/lazy-controller-loader!./controllers",
    true,
    /\.[jt]sx?$/
  )
);

我尝试从 app.js 之外的另一个文件加载 bootstrap.js，但没有任何控制器加载。我也尝试不注册任何控制器，如下所示：

import { startStimulusApp } from "@symfony/stimulus-bridge";
const app = startStimulusApp();
export default app;

然后在各个 .js 文件中手动调用

app.register('', );

，但它不会加载。

Answer 1

看起来您使用的是现代 ECMAScript 版本，而stimulus-bridge 无法识别您的代码，因为它使用的是 ES2020 版本。

这个bug已经提交了但是还没有解决方案。

问题出在评论解析上。 Stimulus-bridge 尝试将您的代码解析为 ES2020，在某些地方它因解析错误而失败，不要暴露任何错误，您认为一切都很好。但它没有成功解析您的代码，并且刺激不知道您的评论，因此所有控制器都编译到一个文件。

您可以使用 patch-package 自行修复。只需安装它并按照自述文件操作即可。

所以你的解决方案是：

1. 安装补丁包

   yarn add patch-package postinstall-postinstall
   npx json -I -f package.json -e 'this.scripts.postinstall="patch-package"'
   

2. 修复“错误”：

   sed -i '' 's/ecmaVersion: 2020/ecmaVersion: 2022/' node_modules/@symfony/stimulus-bridge/src/util/get-stimulus-comment-options.ts
   

3. 创建补丁：

   yarn patch-package @symfony/stimulus-bridge
   

此后您将不会丢失对供应商相关文件的修复。每次

yarn install

操作后都会应用补丁。另请检查 ES2022 是否是适合您的版本，并根据需要进行更改。