Question

大家晚上好。

我不确定如何解释我的问题。我将通过显示代码示例和预期结果向您展示。由于代码已获得许可，因此我无法使用实际问题中的代码。对此我感到非常抱歉，我将很高兴有人可以帮助我解决我的问题。

我正在使用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

在Application类中（在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这样的东西：有一个实例创建。为该范围声明新的Editor单例。不要使用已经缓存的。

我要解决的另一个想法是为实例设置上下文。如果您理解我的意思，请在编辑器单例中创建类似new Map<Context, Editor>的内容。但是我没有找到一种方法来为实例设置上下文或仅对其范围进行导入。

我将不胜感激。我正在搜索两天，但仍然不知道如何在不重写所有导入内容的情况下进行操作。

很抱歉我的英语错误。我不是讲母语的人，也不懂语言。

感谢所有关注我的问题的人。

Answer 1

如何重新创建编辑器：

library(tidyverse)
df <- data_frame(
   var = c("buildA.equipA.point", "buildA.equipA.another.point",
           "buildA.equipA.yet.another.point")
)
df2 <- df %>% extract(var, c("Building", "equip", "point"), "^([^.]+)\\.([^.]+)\\.(.+)$")
df2
# A tibble: 3 x 3
  Building equip  point            
  <chr>    <chr>  <chr>            
1 buildA   equipA point            
2 buildA   equipA another.point    
3 buildA   equipA yet.another.point

这样，您可以轻松设置不同的范围：

  // 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不动态，这也适用。

仅适用于实例的范围导入

1 个答案: