Browserify ES6 - 动态要求

Question

我希望在我的应用程序中创建一个模块系统。我不确定如何实施以下内容：

模块 1

class SomethingModule {

}

export default SomethingModule;

模块 2

class SomethingElseModule {

}

export default SomethingElseModule;

模块加载器

class ModuleLoader {

    load(module) {
        // "module" could be "Something" which should create a
        // new instance of "SomethingModule"
        module = module + 'Module';
        // Require and create an instance of "module"
    }

}

export default ModuleLoader;

主文件

var ModuleLoader = require('./ModuleLoader');

var loader = new ModuleLoader();
loader.load('SomethingElse');

我对模块化 JavaScript 很陌生，甚至不知道这是否 possible/feasible。如果没有，您是否建议在不污染全局命名空间和引用 window[moduleName]?

的情况下执行此操作？

Answer 1

如果我很了解你的问题，你可以创建一个 Map 并在其中加载你的模块：

class ModuleLoader {
    constructor() {
        this._modules = new Map();
    }

    load(module) {
        // you should check if the module exist in a good world to not get any error
       // and probably adjust the path of what you are requiring
        this._modules.set(module, new require(`${module}Module`));
    }

    getModuleByName(name) {
        return this._modules.get(name);
    }

}

编辑： 要使其与 browserify 一起使用，您需要在某处拥有所有模块的列表。您可以像这样创建一个单独的文件 ModuleBag：

//moduleBag.js
import yourModule from './yourModule';
import yourSecondModule from './yourSecondModule';

var map = new Map();
map.set('yourModule', yourModule);
map.set('yourSecondModule', yourSecondModule);

export default class map;

//moduleLoader.js
import moduleBag from './moduleBag';
class ModuleLoader {
        constructor() {
            this._modules = new Map();
        }
    
        load(module) {
            var mod = moduleBag.get(module);
            this._modules.set(module, new mod());
        }
    
        getModuleByName(name) {
            return this._modules.get(name);
        }
    
    }

或者只是把它放在同一个文件中。这样，browserify 将能够加载所有必要的文件。

Browserify ES6 - 动态要求

Browserify ES6 - Dynamic Requires

javascript

browserify

ecmascript-6