Comment créer un fichier js de dépendance externe autonome pour une bibliothèque modularisée?

Fondamentalement, j'ai un certain nombre d'applications Web héritées qui référencent et utilisent une bibliothèque à partir d'un CDN (Kendo UI). J'ai une tâche pour supprimer de telles demandes aux hôtes distants et donc je voudrais encorporer la bibliothèque dans une tâche de script npm existante qui rassemble toutes les dépendances dans un seul fichier js local auquel l'application fait référence. Le problème que j'ai est que this library ne fournit pas de fichiers js pré-compilés qui peuvent être utilisés immédiatement (contrairement à d'autres bibliothèques comme jquery ou angular), mais il est modularisé et nécessite webpack ou browserify pour l'utiliser. Puisque nos applications héritées n'utilisent pas l'approche modulaire pour charger les dépendances, et je n'ai aucune possibilité de les réécrire, je voudrais en quelque sorte empaqueter la bibliothèque modularisée dans un fichier js équivalent qui chargera la bibliothèque pour que mon application puisse y accéder simplement via une référence <script>.Comment créer un fichier js de dépendance externe autonome pour une bibliothèque modularisée?

J'ai essayé d'utiliser browserify pour compiler à partir d'un fichier source js contenant simplement une référence require à la bibliothèque, mais le fait de référencer le fichier compilé dans mon application génère une erreur car les fonctions de la bibliothèque ne sont pas disponibles.

Quelqu'un peut-il me diriger dans la bonne direction?

Source

2017-09-26 Rich Browne

Vous êtes sur la bonne voie en utilisant webpack, il vous suffit d'exposer la bibliothèque. Si la lib est purement basée sur un module, vous devrez créer votre propre nom global, par exemple. jQuery a fait jQuery & $, pour votre Kendo UI, peut-être que vous pourriez l'exposer à un kendoUI global, etc. – Keith

Merci Keith. Je ne suis pas sûr que ce soit juste un peu bizarre avec kendo mais il semble que la variable globale 'kendo' soit définie par le fichier compilé de browserify mentionné ci-dessus, mais que l'extension jQuery fonctionne (par exemple' $ (...). KendoDropDownList() ') ne sont pas disponibles globalement (ils sont disponibles dans le fichier js que je compile avec browserify). Des idées? –

Oui, vous avez probablement jQuery en tant que dépendance dans l'interface utilisateur kendu. Par défaut, vous obtiendrez alors 2 versions de jQuery. Ce que vous faites ici est setup webpack pour que jQuery soit un external. A l'intérieur de votre config webpack, mettez 'externals: {jquery:" jQuery "} ,. Notez la jquery minuscule, normalement dans le noeud nous gardons les minuscules de require, mais si Kendu UI, exige ('jQuery'), vous devrez modifier. – Keith

Si vous utilisez des bibliothèques basées sur des modules et que vous souhaitez les utiliser de manière autonome, vous devrez effectuer 2 opérations.

exposer le module à la portée globale. Peut-être utiliser le chargeur d'exposition https://github.com/webpack-contrib/expose-loader ou même simplement attribuer à l'objet fenêtre.
Si les modules utilisent également une bibliothèque que vous incluez également, vous devez en informer webpack.

par exemple.

{ 
    externals: { 
    jquery: 'jQuery' 
    } 
    // other stuff.. 
}

Enfin lorsque vous incluez ces, rappelez-vous l'ordre de vos balises de script. par exemple. assurez-vous d'inclure jquery avant votre javascript livré.

Source

2017-09-26 10:53:05 Keith

Super, merci Keith. –

Comment créer un fichier js de dépendance externe autonome pour une bibliothèque modularisée?

Répondre

Questions connexes