Question

我捆绑的应用程序中有一个类，希望允许该应用程序的用户扩展。

这是捆绑类的定义：

import * as d3 from 'd3';

class VizPlugin {

    constructor(options) {
        this.options = options;
    }

    build() {
    }

...

}

export default VizPlugin;

该应用程序是安装在客户服务器上的完整的客户端/服务器nodejs应用程序。在将应用程序捆绑/部署/安装在服务器上之后，我希望客户能够扩展该应用程序并添加自己的自定义模块作为扩展程序/插件，如下所示：

import VizPlugin from './js/viz-plugin'; //there is no viz-plugin.js because it's bundled

class ScatterPlot extends VizPlugin {

    constructor(options) {
        super(options);
    }

    build() {

        //I'd like to also use the reference to d3 from VizPlugin here

    }
...
}

export default ScatterPlot;

他们会将其javascript代码与其他捆绑的客户端javascript放在一个目录中，然后从该目录中导入。基本上，需要有一个名为“ viz-plugin.js”的命名文件，可以从“ scatter-plot.js”导入。

Answer 1

将d3添加到您的类中，并为扩展程序提供一些使用它的方法：

import * as d3 from 'd3';

class VizPlugin {

    constructor(options) {
        this.options = options;
        this.d3 = d3;
    }
    useD3 (callback) {
      callback(this, this.d3);
    }
    build() {
    }

...

}

module.exports = VizPlugin as VizPlugin;

Answer 2

您可以使用webpack SplitChunksPlugin，并使用splitChunks.name为各个模块命名。

以下代码将查找viz-plugin.js模块，并告诉其保留其名称：

optimization: {
    splitChunks: {
        name(module, chunks, cacheGroupKey) {
            const moduleId = module.identifier();
            if( moduleId && moduleId.indexOf('viz-plugin.js') >= 0 ) {
                return 'viz-plugin'
            }
            return null;
        }
    }
},

现在，在dist / build输出中，将存在一个名为“ viz-plugin.js”的文件，您可以对其进行扩展，如下所示：

import VizPlugin from './dist/js/viz-plugin';

class ScatterPlot extends VizPlugin {

    constructor(options) {
        super(options);
    }

    build() {

        //I'd like to also use the reference to d3 from VizPlugin here

    }
...
}

export default ScatterPlot;

Webpack：从外部捆绑包中引用捆绑的组件

2 个答案: