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

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;