Question

具有适当依赖关系解析的延迟加载，没有全局变量。

说我有三个模块，main，lazy和dep。 main和lazy都导入dep。 main在某个时间点可能需要加载，也可能不需要加载lazy。如何将webpack配置为：

将main和dep捆绑在一起（好吧，这很容易）
单独捆绑lazy，不捆绑dep。加载时，它会解析dep捆绑包中的main。
无需在窗口或全局名称空间中编写任何内容

我可以找到方法（2）或（3），但不能同时做到。

当我使用SplitChunksPlugin时，我得到（2）不包含（3）-输出将window.webpackJsonP写入全局名称空间。出于我的目的，这很糟糕，原因有两个。我必须支持没有window对象的DOMLess环境，我的项目是一个可以在其他人的网站/应用程序上运行的库/小部件，所以我不能离开全局对象。

将其配置为两个入口点时，我得到（3），而没有（2）-我的lazy文件包含dep模块代码，这似乎是多余的。

// index.js / entrypoint
import Main from "./Main.js";
new Main().sayHi().doStuff();

// Main.js
import Dep from "./Dep.js";

export default class Main extends Dep {
  constructor() {
    super();
    this.name = "Main";
  }

  doStuff() {
    import("./Lazy.js")
      .then(module => {
        let lazy = new module.default();
        lazy.sayHi();
      })
      .catch(err => {
        console.log(`owch: ${err.message}`);
      });
    }
}

// Lazy.js
import Dep from "./Dep.js";

export default class Lazy extends Dep {
  constructor() {
    super();
    this.name = "Lazy";
  }
}

// Dep.js
export default class Dep {
  constructor() {
    this.name = "Dep";
  }

  sayHi() {
    console.log(`hello, my name is ${this.name}`);
    return this;
  }
}

是否动态导入而不使用全局名称空间？

0 个答案: