web-dev-qa-db-fra.com

Dynamic System.import avec webpack?

J'essaie de porter du code ES6 que j'ai écrit et qui utilise systemjs + Babel.

Je n'ai eu aucun problème à porter la majeure partie du code.

Cependant, j'ai du code qui doit charger dynamiquement un module ES6, comme ceci:

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

src est un module ES6 externe qui peut aussi avoir des dépendances (importations statiques).

Comment pourrais-je porter ce code sur Webpack? Si j'essaie d'utiliser une instruction require, je reçois un AVERTISSEMENT qui semble être normal selon la documentation Webpack.

webpackes6-module-loader
5
warpdesign

Les réponses précédentes étaient correctes, mais maintenant dans Webpack 2.2 + babel (au moment de l'écriture, v2.2.0-rc.3 est la dernière version), nous pouvons le faire. Je ne me suis pas testé, mais je viens de faire la recherche qui m'a conduit ici.

Lisez ceci à partir de la documentation webpack: Division de code avec es2015

Juste en dessous de cette section se trouve Expressions dynamiques avec cet exemple:

function route(path, query) {
  return import("./routes/" + path + "/route")
    .then(route => new route.Route(query));
}
// This creates a separate chunk for each possible route

Assurez-vous de noter que vous devrez installer le plug-in Syntax Dynamic Import , comme indiqué dans le document.

9
sic1

Webpack 1 ne prend pas en charge System.import, vous pourrez peut-être contourner ce problème en utilisant le require.ensure de Webpack pour charger des modules de manière dynamique. Les détails de cette approche peuvent être trouvés ici: https://webpack.github.io/docs/code-splitting.html#es6-modules

Selon ce que vous souhaitez faire, vous devrez peut-être également utiliser la fonction context de Webpack. Pour plus d'informations, cliquez ici. https://webpack.github.io/docs/context.html

Webpack 2 devrait résoudre ces problèmes car il supportera directement ES6 & System.import.

3
David Burrows

Vous n'avez pas de "chargement dynamique" dans le WebPack (puisque le bundle doit réduire toutes les dépendances de vos modules). La chose la plus proche de ce que vous voulez atteindre (et la bonne façon de le faire dans webpack) serait d’utiliser require.ensure - voir documentation .

Une façon de transformer votre code SystemJS en webpack serait:

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;
    }
}

Je vous conseillerais de créer une fonction de chargement encapsulant chaque require.ensure (vous souhaiterez peut-être gérer les rappels différemment).

Vous pouvez consulter un exemple ici

2
topheman

Vous pouvez essayer d'utiliser une bibliothèque comme little-loader pour gérer cela. Exemple:

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

load('<src>', function(err) {
    // loaded now, do something
});
1
Juho Vepsäläinen