如何在Symfony Webpack Encore中从多目录加载Stimulus控制器？

当然可以同时从多个目录加载Stimulus控制器，以下是几种实用的实现方式：

1. 手动注册单个控制器 #

如果只需加载其他目录下的特定控制器，直接导入后调用app.register()即可完成注册：

import { startStimulusApp } from '@symfony/stimulus-bridge';
// 导入其他目录的控制器文件
import AlertController from './shared/controllers/AlertController';
import ModalController from './admin/controllers/ModalController';

export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/,
));

// 注册额外目录的控制器
app.register('alert', AlertController);
app.register('modal', ModalController);

2. 批量加载整个目录的控制器 #

如果要一次性加载某个目录下的所有控制器，可以通过额外创建require.context实现批量注册：

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

export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.[jt]sx?$/,
));

// 创建对应目录的上下文，批量加载控制器
const adminControllersContext = require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./admin/controllers',
    true, // 开启递归加载子目录
    /\.[jt]sx?$/
);

// 遍历上下文并注册每个控制器
adminControllersContext.keys().forEach(key => {
    const controllerModule = adminControllersContext(key);
    // 从文件名提取控制器名称（比如从"./UserController.js"提取"user"）
    const controllerNameMatch = key.match(/\.\/([A-Z][a-zA-Z0-9]+)Controller\.[jt]sx?$/);
    if (controllerNameMatch) {
        const controllerName = controllerNameMatch[1].toLowerCase();
        app.register(controllerName, controllerModule.default);
    }
});

3. 通过controllers.json配置批量加载 #

如果你使用controllers.json管理控制器规则，可以直接在配置中添加额外目录：

{
    "controllers": {
        "./controllers/": {
            "glob": "*.{js,ts}",
            "lazy": true
        },
        "./admin/controllers/": {
            "glob": "*.{js,ts}",
            "lazy": true
        },
        "./shared/controllers/": {
            "glob": "*.{js,ts}",
            "lazy": true
        }
    },
    "entrypoints": []
}

之后修改bootstrap.js，让Stimulus加载这个配置（替代原有的目录直接加载）：

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

// 从controllers.json加载所有配置的控制器目录
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./',
    true,
    /\.(j|t)sx?$/
));

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