Webpack项目中文件增删及服务自注册至Registry的技术问询

我来给你一套适配你现有项目结构的实现方案，让服务类能自动注册到ServiceRegistry，之后在项目任何地方都能便捷调用这些服务：

1. 实现单例模式的ServiceRegistry #

首先我们需要一个全局唯一的注册表，确保整个项目里只有一个实例，避免重复注册或获取不到服务。修改src/registry/ServiceRegistry.js如下：

// src/registry/ServiceRegistry.js
class ServiceRegistry {
  constructor() {
    // 单例逻辑：如果已有实例，直接返回
    if (!ServiceRegistry.instance) {
      this.services = new Map();
      ServiceRegistry.instance = this;
    }
    return ServiceRegistry.instance;
  }

  // 注册服务：传入服务名称和服务实例/构造函数
  register(serviceName, service) {
    if (this.services.has(serviceName)) {
      console.warn(`⚠️ 服务 ${serviceName} 已存在，将被覆盖`);
    }
    this.services.set(serviceName, service);
  }

  // 获取指定服务：不存在则抛出错误
  get(serviceName) {
    const service = this.services.get(serviceName);
    if (!service) {
      throw new Error(`❌ 未找到服务 ${serviceName}`);
    }
    return service;
  }

  // 可选：获取所有已注册的服务列表
  getAllServices() {
    return Array.from(this.services.entries());
  }
}

// 创建单例实例并冻结，防止被修改
const serviceRegistryInstance = new ServiceRegistry();
Object.freeze(serviceRegistryInstance);

export default serviceRegistryInstance;

2. 让服务自行注册到注册表 #

接下来修改你的服务文件（比如src/services/Service1.js），在文件加载时自动完成注册：

// src/services/Service1.js
import ServiceRegistry from '../registry/ServiceRegistry';

// 定义你的服务类
class Service1 {
  doBusinessLogic() {
    return "Service1 执行了业务逻辑 🚀";
  }
}

// 直接注册实例（如果需要懒加载，也可以注册构造函数）
ServiceRegistry.register('Service1', new Service1());

3. 自动导入所有服务（告别手动import） #

现在你的src/services/index.js是手动导入单个服务，当服务越来越多的时候会很麻烦。我们可以用Webpack的require.contextAPI自动导入当前目录下的所有服务文件，修改src/services/index.js：

// src/services/index.js
// 自动匹配当前目录下除了index.js之外的所有.js文件
const serviceFiles = require.context('./', false, /^((?!index).)*\.js$/);

// 遍历并导入所有服务文件，触发注册逻辑
serviceFiles.keys().forEach(filePath => {
  serviceFiles(filePath);
});

4. 在项目中调用已注册的服务 #

最后在src/index.js或者其他业务文件里，就可以直接获取并使用服务了：

// src/index.js
// 先导入注册表和所有服务（确保服务完成注册）
import ServiceRegistry from './registry/ServiceRegistry';
import './services';

// 使用已注册的Service1
const service1 = ServiceRegistry.get('Service1');
console.log(service1.doBusinessLogic()); // 输出 "Service1 执行了业务逻辑 🚀"

额外提示 #

• 如果你的服务是异步加载的（比如需要从后端拉取配置），可以把注册逻辑包装成Promise，在使用前等待所有服务注册完成。
• 如果用TypeScript开发，只需要给ServiceRegistry添加对应的类型定义，逻辑完全一致。
• 注册服务时，建议使用唯一的服务名称，避免冲突。

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