如何让JS引擎无需显式导入即可加载.js文件？（Angular模块化场景）

Great question! This is a super common pain point when building pluggable, modular applications—you want to drop in a module file and have it just work without touching your core entry code. Let’s break down the standard solutions for this, tailored to your Angular 2+ setup:

1. Use Webpack’s require.context (Bundler-Based Workflow) #

If you’re using Webpack (the standard bundler for Angular projects), require.context is the easiest way to auto-discover and load modules in a directory. It lets you define a "context" that scans a folder for files matching a pattern, then automatically imports and executes them—triggering your module’s registration with ModuleRegistry.

Here’s how to implement it in your index.js or a dedicated module loader file:

// src/app/module-loader.js
const moduleContext = require.context('./modules', true, /Module.*\.js$/);

// Execute each module file to trigger registration
moduleContext.keys().forEach(modulePath => {
  moduleContext(modulePath);
});

• ./modules: The directory where your ModuleOne.js, ModuleTwo.js, etc., live.
• true: Recursively scans subdirectories (optional, adjust as needed).
• /Module.*\.js$/: Regex to match your module file naming pattern (tweak this to fit your actual filenames).

Just import this loader once in your index.js, and any module file added to the modules directory will be automatically loaded and registered during bundling. No manual updates to index.js required!

2. Dynamic Imports with a Module Manifest (Browser-Friendly) #

If you need more flexibility (or aren’t using Webpack), you can use ES dynamic imports paired with a module manifest. The idea is:

1. Generate a list (manifest) of available modules (either at build time or server-side).
2. Fetch this manifest in your app, then dynamically import each module listed.

Step 1: Generate a Manifest (Server-Side/Build Script) #

Use a Node.js script to scan your modules directory and create a JSON file listing all module paths:

// scripts/generate-module-manifest.js
const fs = require('fs');
const path = require('path');

const modulesDir = path.join(__dirname, '../src/app/modules');
const moduleFiles = fs.readdirSync(modulesDir)
  .filter(file => file.endsWith('.js'))
  .map(file => `./modules/${file}`);

fs.writeFileSync(
  path.join(__dirname, '../src/app/modules-manifest.json'),
  JSON.stringify(moduleFiles, null, 2)
);

Run this script before building your app (add it to your package.json scripts for convenience).

Step 2: Load Modules from the Manifest #

In your app’s entry point, fetch the manifest and dynamically import each module:

// src/index.js
async function loadAndInitModules() {
  try {
    // Fetch the manifest
    const manifestResponse = await fetch('./modules-manifest.json');
    const modulePaths = await manifestResponse.json();

    // Import each module (executes the file, triggering registration)
    await Promise.all(modulePaths.map(path => import(path)));

    // Initialize all registered modules
    ModuleRegistry.initAllModules();
  } catch (err) {
    console.error('Failed to load modules:', err);
  }
}

// Kick off module loading before app initialization
loadAndInitModules().then(() => {
  // Bootstrap your Angular app here
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
});

This way, adding a new module only requires dropping the file into the modules directory—no changes to your core app code.

3. Angular-Specific: Leverage NgModule and Dynamic Module Loading #

Since you’re using Angular, you can align your pluggable modules with Angular’s native module system. Instead of a custom GenericModuleDefinition, create each module as an NgModule, then dynamically load them using Angular’s compiler.

Here’s a simplified example:

// src/app/modules/module-one/module-one.module.ts
import { NgModule } from '@angular/core';
import { GenericModuleDefinition } from '../generic-module-definition';

@NgModule({})
export class ModuleOneModule extends GenericModuleDefinition {
  initModule() {
    // Your module initialization logic here
    console.log('Module One initialized');
  }
}

Then, create a service to load these Angular modules dynamically:

// src/app/services/module-loader.service.ts
import { Injectable, Compiler, Injector, NgModuleRef } from '@angular/core';
import { GenericModuleDefinition } from '../modules/generic-module-definition';

@Injectable({ providedIn: 'root' })
export class ModuleLoaderService {
  constructor(private compiler: Compiler, private injector: Injector) {}

  async loadModules(): Promise<void> {
    // List of possible module names (or fetch from a manifest)
    const moduleNames = ['ModuleOneModule', 'ModuleTwoModule'];

    for (const name of moduleNames) {
      try {
        // Dynamically import the module
        const module = await import(`../modules/${name.toLowerCase()}/${name}.module.ts`);
        const ngModuleClass = module[name];

        // Compile and instantiate the module
        const moduleFactory = await this.compiler.compileModuleAsync(ngModuleClass);
        const moduleRef: NgModuleRef<GenericModuleDefinition> = moduleFactory.create(this.injector);

        // Call the init method
        moduleRef.instance.initModule();
      } catch (err) {
        console.log(`Module ${name} not found, skipping`);
      }
    }
  }
}

Use Angular’s APP_INITIALIZER to run this service before your app boots:

// src/app/app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { ModuleLoaderService } from './services/module-loader.service';

export function initModules(loader: ModuleLoaderService) {
  return () => loader.loadModules();
}

@NgModule({
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initModules,
      deps: [ModuleLoaderService],
      multi: true
    }
  ]
})
export class AppModule {}

This integrates seamlessly with Angular’s ecosystem and gives you access to Angular’s dependency injection for your modules.

Key Takeaway #

You don’t need to manually update a global file to register modules. The best approach depends on your build setup:

• Use require.context if you’re on Webpack (simplest, most reliable).
• Use a dynamic import + manifest for more flexibility or non-Webpack setups.
• Use Angular’s dynamic module loading if you want to align with Angular’s native system.

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