Импорт области только для экземпляра

1

Добрый вечер всем.

Я не знаю, как объяснить свою проблему. Я покажу его вам, показывая примеры кода и ожидаемых результатов. Я не мог использовать код из реальной проблемы, потому что код находится под лицензией. Мне очень жаль, и я буду рад, что кто-то может помочь мне решить мою проблему.

Я использую последнюю версию webpack, babel.

Мое приложение разбито на три части, которые динамически импортируются друг другом. Это означает, что если я запустил плагин с расщепленными кусками, он действительно создаст три прозрачных файла.

Части - это Core, Shared, Application. Где Core только создает экземпляр приложения.

Результат частей объединяется в один файл. Таким образом, он связан одним тегом скрипта html.

Структура проекта:

src/app    // For Application
src/core   // For Core
src/shared // For Shared

В конфигурации webpack я разрешаю псевдоним для импорта ˙Editor $ ˙. Я переименовал имена переменных, потому что они включают имя проекта.

resolve: {
    alias: {
        "Editor$": path.resolve('./src/app/statics/Editor.js'),
    }
},

Содержимое основного файла

function createInstance(name, id) {
    import("app").then(App => {
        App(name, id)
    });
}

Маленький бит файла приложения

imports...
import Framework from "./framework"
function createApp(name, id) {
    new Framework({name, id}).$mount(...)
}

export default createApp

В классах приложения (что создается внутри Framework) Является ли этот импорт

import Editor from "Editor"

Класс Editor является одноэлементным. Но только для созданного экземпляра.

class Editor {
    static instance;

    id = null;

    constructor(){
        if(this.constructor.instance){
            return this.constructor.instance
        }

        this.constructor.instance = this
    }

    static get Instance() {
        return this.instance || (this.instance = new this())
    }

    static get Id {
        return this.Instance.id;
    }

}

export default Editor

Проблема заключается в разрешении зависимостей webpack. Потому что webpack ставит и унифицирует весь импорт в верхнюю часть файла.

Таким образом, импорт оценивается один раз в течение жизненного цикла программы.

Но мне нужно сказать webpack что-то вроде: Существует создание экземпляра. Объявите новый одноэлементный редактор для этой области. Дон не использовать уже кэшированный.

Моя другая идея, как исправить это, - установить контекст для экземпляра. И в редакторе singleton создайте что-то вроде new Map<Context, Editor> если вы понимаете, что я имею в виду. Но я не нашел способа установить контекст для экземпляра или области импорта только для него.

Буду признателен за любую помощь. Я работаю в Интернете через два дня и до сих пор не знаю, как это сделать, не переписывая весь импорт.

Извините за ошибки на моем английском языке. Я не носитель языка, и мой мозг не для языков.

Спасибо всем, кто заглянул в мою проблему.

Теги:
ecmascript-6
scope
webpack
singleton

1 ответ

0

Как насчет воссоздания редактора:

  // Editor.js
  class Editor {
   // ...
  }

  let instance;

 export function scope(cb) {
     instance = new Editor();
     cb();
     instance = null;
 }

 export default function createEditor() { 
    if(!instance) throw Error("Editor created out of scope!");
    return instance;
 }

Таким образом, вы можете легко настроить различные области:

 // index.js
 import {scope} from "./editor";

 scope(() => {
    require("A");
    require("B");
 });

 scope(() => {
   require("C");
 });

 // A
 import Editor from "./editor";
 (new Editor()).sth = 1;

  // B
 import Editor from "./editor";
 console.log((new Editor()).sth); // 1

 // C
 import Editor from "./editor";
 console.log((new Editor()).sth); // undefined

 // note that this will fail:
 setTimeout(() => {
   new Editor(); // error: Editor created out of scope
 }, 0);

Это также работает для вложенных require и import если они не являются динамическими.

Поделиться
  • 0
    Здравствуйте, спасибо за быстрый ответ. Я разрешаю модули по синтаксису import а не require . Потому что все классы написаны на EcmaScript 6 и имеют экспорт по умолчанию. Позвольте мне показать вам один класс из них: `Импорт редактора из класса" Редактор "Blot extends ... {onCreate () {Editor.Something.Do.That (" что-то ")}}` Используя вашу идею, я должен переписать все эти классы для поддержки "синтаксиса" изменения. Редактор создается внутри Core и сохраняется до тех пор, пока страница не обновится. Я пытаюсь найти способ, не редактируя все эти файлы.
  • 0
    В любом случае, мне нравится ваше решение, если я немного его модифицирую, но меня интересует решение через веб-пакет. Если бы я сказал ему, чтобы сделать что-то вроде баррикады памяти. Не используйте переменную повторно, а создайте новую на месте.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню