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

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。Andrew正在寻找来自信誉良好的来源的答案。

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

以下是捆绑类的定义：

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() {
    }

...

}

export default VizPlugin;