Возможно ли вынести Promise & require.ensure в отдельную функцию и подключать файлы через нее?

Question

[Bowen]

Привет други.

Ленивая загрузка модулей в angular2 в связке с webpack выглядит примерно так:

loadChildren: () => new Promise(resolve => {
        (require as any).ensure([], (require: any) => {
            resolve(require("./module_path")["ModuleName"]);
        }, "chunkName")
})

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

Пример:

function loadModule(path: string){
    // обработка строки path
    let p = new Promise(resolve => {
        (require as any).ensure([], (require: any) => {
            resolve(require(path)[ModuleName]);
        }, chunkName)
    });
    return p;
}
loadChildren: () => loadModule('./module_path#ModuleName')

Проблема в том, что при компиляции, я получаю одно уведомление и одну ошибку:
Уведомление:

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Ошибка:

var p = new Promise(function (resolve) {
        !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }()).ensure([], function (require) {
            resolve(require(path)[moduleName]);
        }, chunkName);
    });

Конечно я гуглил, много что нашел и испробовал, но ничего не помогло.
Хотелось бы понять, в чем проблема, что я делаю не так, как это все решить ?
Буду признателен за помощь/советы!

Comments

[Алексей Зуев]

Я думаю это не будет работать. Анализатор webpack не будет разбираться в вашем черном ящике

[Bowen]

Алексей Зуев: Так я вот не могу понять почему первый вариант webpack обрабатывает нормально, а второй нет.

[Алексей Зуев]

Bowen: Посмотрите здесь видео. https://learn.javascript.ru/screencast/webpack Продвинутый require вроде, мне кажется я где-то там видел ответ на ваш вопрос

[Bowen]

Алексей Зуев: Там совсем другой пример. Webpack ругается на (require as any) а не на строку ниже где именно и подключается модуль.

[Bowen]

Алексей Зуев: Вы были правы. Он ругается на то что я пытаюсь подключить модуль динамически.
Я несколько раз посмотрел этот скринкаст и видимо не всему уделил должное внимание. По делом мне как говорится ).
Надеюсь разработчики webpack`a что-нибудь придумают и сделают это возможным - было бы очень круто. Большое спасибо что уделили время и помогли мне понять что к чему.

[Алексей Зуев]

Bowen: Не за что, я не разбирался в новой версии вебпака еще, может там что-то придумали или вы как раз новую версию используете?

[Bowen]

Алексей Зуев: Ага, на второй сижу. Пока что ничего нового не нашел по этому вопросу.

Answer 1

[vybornova]

Если еще актуально, то второй пример не работает из-за того что path передается через параметр, а не передан явной строкой в require. Покажу на своем примере, вот так все работает:

export const loadFoo = () => new Promise<any>((resolve, reject) => {
    require.ensure(["Foo/path"], require => {
        resolve(require("Foo/path"));
    }, error => reject(error));
});

А вот так нет:

export const load = (path: string) => new Promise<any>((resolve, reject) => {
    require.ensure([path], require => {
        resolve(require(path));
    }, error => reject(error));
});