Étendre une application avec webpack comme requireJs

Question

Application existante: Mon application utilise require.js. Profitez de ma demande est que d'autres personnes peuvent étendre ma demande par écrit plugins 3ème partie en utilisant require.js

Par exemple: (3ème inscription de plugin parti) // registering a new plugin { url:'#new-page-url', js:'plugin-folder/new-page-url.js' } Alors, quand #new-page-url est frappé partout, requirejs dossier consume de plugin-folder/new-page-url.js

S'il vous plaît noter que, après je compile ma demande, il ne comprend pas la source d'un tiers, car ils peuvent être récupérés à la volée avec requriejs

question: J'ai regardé dans le webpack et comme il compile tout avant la distribution (bundle.js comme fichier de départ) .Comment un plugin tiers peut-il fonctionner à la volée comme dans l'exemple ci-dessus?

Answer 1

S'il vous plaît noter que, après je compile ma demande, il ne comprend pas la source d'un tiers, car ils peuvent être récupérés à la volée avec requriejs

Oui, c'est le problème.

Je suis dans une situation similaire à la vôtre où une grande application du mien écrit comme une collection de modules AMD peut charger des modes d'édition à l'exécution, qui sont aussi des modules AMD. Les modes ne sont généralement pas associés à l'application.

autant que je sache, il est impossible de reproduire uniquement avec Webpack la possibilité de faire l'équivalent d'un RequireJS » require([a]) où a est une variable dont la valeur ne peut pas être connue au moment de la construction, mais est déterminée au moment de l'exécution. (Et pour le bénéfice des lecteurs qui ne connaissent pas bien RequireJS, je vais ajouter que oui, je ne veux le premier argument d'être [a] et pas seulement a. RequireJS fait une distinction entre les deux.)

Webpack a besoin de savoir au moment de la construction quels modules il va regrouper. ("Besoins de savoir" signifie qu'il doit connaître le nom et trouver la source du module.) Il ne supporte donc pas le chargement dynamique de modules qui ne sont connus qu'à l'exécution. Si vous lisez la documentation, ou un tutoriel, vous rencontrerez des discussions sur le chargement dynamique avec Webpack mais celles-ci ne permettent pas de faire l'équivalent du cas require([a]). Webpack peut diviser un paquet en morceaux et charger des morceaux au besoin, mais pour que cela fonctionne, Webpack doit toujours savoir à l'avance l'ensemble des modules dont il aura besoin. Ceci n'autorise pas le chargement à l'exécution d'un module inconnu lors de la compilation. Il ya aussi require.context, mais alors qu'il vous permet de déterminer à l'exécution quel module spécifique vous voulez, l'ensemble dont provient le module est déterminé au moment de la construction. Si au moment de la construction, vous savez que vous allez utiliser l'un de A, B, C, c'est bien. Mais si vous ne savez pas au moment de la construction le nom de votre module, ou si vous ne pouvez pas en alimenter Webpack, vous n'avez pas de chance. Cela étant dit, il devrait être possible de construire le cœur de votre application avec Webpack et de faire appel directement à un chargeur de module comme RequireJS ou SystemJS. C'est la direction dans laquelle je m'engage avec ma propre application, mais je n'ai pas encore franchi ce pont.