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很陌生，并且不知道这是否可行/可行。如果没有，有没有一种方法可以做到这一点，你建议不要污染全局命名空间并引用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 - 动态需求

1 个答案: