Dynamisches System.import mit webpack?

Ich versuche Hafen einige ES6-code, den ich geschrieben habe, verwendet systemjs + Babel.

Ich habe keine Probleme haben, portieren die meisten der code.

Jedoch habe ich einige code muss dynamisch geladen, ein ES6 module, wie:

function load(src) {
    System.import(src).then(function() {});
}

src ist eine externe ES6 module, die können auch Abhängigkeiten (statische Importe).

Wie konnte ich Anschluss diesen code Webpack ? Wenn ich versuche, verwenden Sie require-Anweisung, ich bin immer eine WARNUNG, das scheint normal zu sein nach dem Webpack docs.

InformationsquelleAutor warpdesign | 2016-03-19

  1. 3

    Webpack 1 nicht-support-System.importieren, können Sie in der Lage sein, dies zu umgehen, mithilfe von Webpack s require.ensure dynamisch Module laden. Details zu diesem Ansatz finden Sie hier: https://webpack.github.io/docs/code-splitting.html#es6-modules

    Je nach genau das, was Sie tun möchten, müssen Sie möglicherweise verwenden Webpack s context - Funktion, siehe hier für mehr info https://webpack.github.io/docs/context.html

    Webpack 2 sollte beheben diese Probleme, da es ES6-support & Systems.direkt importieren.

    InformationsquelleAutor David Burrows

  2. 2

    Sie haben nicht so etwas wie "dynamische Belastung" im webpack (seit der bundler muss nach unten gehen, um alle Ihre Modul-Abhängigkeiten). Die nächste Sache, was Sie erreichen wollen (und der richtige Weg, es zu tun im webpack), würde require.ensure - siehe Dokumentation.

    Eine Möglichkeit, drehen Sie Ihre SystemJS code in webpack wäre:

    function load(moduleName) {
    switch (moduleName) {
        case 'foo':
            require.ensure([], require) => {
                const foo = require('./foo.js');
                //do something with it
            }
            break;
        case 'bar':
            require.ensure([], require) => {
                const bar = require('./bar.js');
                //do something with it
            }
            break;
    }
}

    Ich würde Ihnen raten, machen Sie eine load-Funktion gekapselt jeder require.ensure (Sie können zum verwalten von callbacks anders).

    Können Sie sich ein Beispiel hier

    Leider kann ich nicht verwenden Sie switch/case: ich habe keine Ahnung von den Namen der Datei.
    Warum hast du keine Ahnung von den Namen der Datei? Das nicht machen Sinn im WebPack. Im WebPack, Sie bündeln Ihre Dateien, so dass alle Ihre Dateien in Ihrem Dateisystem. Deshalb müssen Sie wissen, Ihre Dateien nach vorne, damit Sie in Ihrem source-code, richtig?
    "Sie haben nicht so etwas wie "dynamische Belastung" im webpack (seit der bundler muss nach unten gehen, um alle Ihre Modul-Abhängigkeiten)". Das ist einfach falsch. require.ensure echte dynamisches laden. Überprüfen Sie die Netzwerk-tab in den dev-Konsole: die tatsächlichen Anforderungen für die tatsächliche zusätzliche bundle-Dateien sind gefeuert. Es ist der ganze Sinn dieser Konstruktion: damit Webpack zu tun " code-splitting.
    ich würde Ihnen raten, machen Sie eine load-Funktion Kapselung von jedem verlangen.gewährleisten (Sie können zum verwalten von callbacks anders). Das ist eigentlich schlecht beraten. Obwohl der code ist umständlich, wie es ist, zu versuchen, um es zu Kapseln wird nur noch schlimmer machen als Webpack muss der literal-Modul Namen, so dass Sie tun können, bedingte Belastung. Nicht require.ensure([myVariable], ... aber require.ensure(['./my/module'], ...

    InformationsquelleAutor topheman

  3. 1

    Könnten Sie versuchen, verwenden Sie eine Bibliothek, wie wenig-loader, um diese zu bewältigen. Beispiel:

    var load = require('little-loader');

load('<src>', function(err) {
    //loaded now, do something
});
    Ich denke, ich werde zu verwenden irgendeine Art von externen loader in der Tat. Aber brauche ich, um das Ergebnis der Skript-Ausführung: ich bin mir nicht sicher, wenig-loader unterstützt.
    Sie könnten Fragen, die an das Projekt. In bestimmten Fällen eine interessante alternative sein kann, um zu laden, den code über ajax und die eval es innerhalb einer iframe basierten sandbox. Dann erfassen Sie das Ergebnis von dort. Das wäre des guten zuviel für Ihre Zwecke, obwohl.
    Angesichts Ihrer src können Abhängigkeiten von eigener (statisch importiert), könnte dies kein ganz triviales problem zu lösen. Sie hätte laden müssen diese importiert werden, bevor auch nur zu versuchen zu beurteilen das Modul, das Sie laden möchten.

    InformationsquelleAutor Juho Vepsäläinen

Schreibe einen Kommentar