Динамический импорт без использования глобального пространства имен? - PullRequest
Новая
       12

Динамический импорт без использования глобального пространства имен?

0 голосов
/ 08 февраля 2019

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

Скажем, у меня есть три модуля: main, lazy и dep.И main, и lazy импорт dep.main может или не нужно загружать lazy в определенный момент времени.Как я могу настроить webpack для:

  1. связка main и dep вместе (хорошо, это просто)
  2. связка lazy сама по себе, без dep.При загрузке он разрешает dep из пакета main.
  3. без записи чего-либо в окне или глобальном пространстве имен

Я могу найти, как это сделать (2) или (3) но не оба одновременно.

Когда я использую SplitChunksPlugin, я получаю (2) без (3) - вывод записывает window.webpackJsonP в глобальное пространство имен.Для моей цели это плохо по двум причинам.Я должен поддерживать среды DOMLess без объекта window, и мой проект представляет собой библиотеку / виджет, который работает на веб-сайтах / приложениях других людей, поэтому я не могу оставлять глобальные переменные.

Когда я настраиваюэто как две точки входа, я получаю (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;
  }
}
...