Webpack: ссылочные компоненты в комплекте - PullRequest
Новая
       8

Webpack: ссылочные компоненты в комплекте

5 голосов
/ 29 января 2020

Внутри моего приложения есть класс, который я хочу разрешить пользователям приложения расширяться.

Вот как выглядит определение связанного класса: 

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».

Ответы [ 2 ]

2 голосов
/ 09 февраля 2020

Добавьте 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;
0 голосов
/ 12 февраля 2020

Вы можете использовать веб-пакет 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;
...